我在我的網站上添加了下拉選單，但遇到了一個問題，即我的鏈接在點擊時并不總是有效。有時單擊鏈接只會使下拉選單消失，但如果您繼續嘗試，最終它會將您帶到您想要去的地方。
我最初懷疑它與過渡持續時間有關，但是在單擊之前玩轉過渡/等待過渡完成似乎沒有任何改變。
這是下拉選單導航欄的 html 塊
nav {
position: sticky;
top: -20px;
}
.dropdown {
width: auto;
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.Python,
.cPP {
position: relative;
width: 500px;
margin-top: 20px;
}
.Python ul,
.cPP ul {
position: absolute;
margin-top: 10px;
width: 200px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: disc;
border: 4px solid white;
border-radius: 5px;
background-color: rgb(86, 114, 117);
opacity: 0;
pointer-events: none;
transform: translateY(-15px);
transition: all 0.4s ease;
}
.Python li,
.cPP li {
background-color: rgb(216, 192, 147);
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 2px;
align-items: center;
line-height: 1.3rem;
}
.Python li:hover,
.cPP li:hover {
background-color: rgb(207, 151, 46);
transition-duration: 0.5s;
pointer-events: all;
}
.Python a,
.cPP a {
color: black;
text-decoration: none;
font-size: 0.5em;
}
.home a {
font-size: 1.0em;
align-items: center;
}
.home a:hover {
color: rgb(24, 218, 208);
transition-duration: 0.4s;
}
.dropdown button {
background: rgb(51, 51, 51);
color: rgb(255, 255, 255);
width: 100%;
font-size: 1.2em;
cursor: pointer;
padding: 5px;
border-color: turquoise;
}
.dropdown button:hover {
color: rgb(132, 255, 243);
border-color: rgb(255, 145, 0);
transition-duration: 0.4s;
}
.Python button:focus ul,
.cPP button:focus ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}<nav>
<div class="dropdown">
<div class="home">
<a href="../index.html">Home</a>
</div>
<div class="Python">
<button>Python</button>
<ul>
<li><a href="../1DKinematics/1DKinematics.html"> 1-D Kinematics</a></li>
<li><a href="./pendulumFriction.html"> Damped Pendulum</a></li>
<li><a href="./drivenPendulum.html"> Driven Pendulum</a></li>
<li><a href="./elasticPendulum.html"> Elastic Pendulum</a></li>
<li><a href="./doublePendulum.html"> Double Pendulum</a></li>
<li><a href="./elasticDoublePendulum.html"> Elastic Double Pendulum</a></li>
<li><a href="./RKvsEC.html"> Runge-Kutta vs. Euler-Cromer </a></li>
<li><a href="../oceanography/bobInWater.html"> Dynamics of Body in the Ocean </a></li>
</ul>
</div>
<div class="cPP">
<button>C </button>
</div>
</div>
</nav>uj5u.com熱心網友回復：
您可能需要執行以下兩件事來解決問題。
- 為您的
a標簽設定樣式，使其具有全寬/全高（更容易點擊） - 更改
pointer-events: all為pointer-events: auto，因為all僅適用于 SVG（請參閱：https : //developer.mozilla.org/en-US/docs/Web/CSS/pointer-events）。
// For test only
document.querySelectorAll('.dropdown a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault()
console.log('clicked')
})
})nav {
position: sticky;
top: -20px;
}
.dropdown {
width: auto;
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.Python,
.cPP {
position: relative;
width: 500px;
margin-top: 20px;
}
.Python ul,
.cPP ul {
position: absolute;
margin-top: 10px;
width: 200px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: disc;
border: 4px solid white;
border-radius: 5px;
background-color: rgb(86, 114, 117);
opacity: 0;
pointer-events: none;
transform: translateY(-15px);
transition: all 0.4s ease;
}
.Python li,
.cPP li {
background-color: rgb(216, 192, 147);
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 2px;
align-items: center;
line-height: 1.3rem;
}
.Python li:hover,
.cPP li:hover {
background-color: rgb(207, 151, 46);
transition-duration: 0.5s;
pointer-events: all;
}
.Python a,
.cPP a {
color: black;
text-decoration: none;
font-size: 0.5em;
}
.home a {
font-size: 1.0em;
align-items: center;
}
.home a:hover {
color: rgb(24, 218, 208);
transition-duration: 0.4s;
}
.dropdown button {
background: rgb(51, 51, 51);
color: rgb(255, 255, 255);
width: 100%;
font-size: 1.2em;
cursor: pointer;
padding: 5px;
border-color: turquoise;
}
.dropdown button:hover {
color: rgb(132, 255, 243);
border-color: rgb(255, 145, 0);
transition-duration: 0.4s;
}
.Python button:focus ul,
.cPP button:focus ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
/* Code added */
.dropdown ul li a {
display: block;
}<nav>
<div class="dropdown">
<div class="home">
<a href="../index.html">Home</a>
</div>
<div class="Python">
<button>Python</button>
<ul>
<li><a href="../1DKinematics/1DKinematics.html"> 1-D Kinematics</a></li>
<li><a href="./pendulumFriction.html"> Damped Pendulum</a></li>
<li><a href="./drivenPendulum.html"> Driven Pendulum</a></li>
<li><a href="./elasticPendulum.html"> Elastic Pendulum</a></li>
<li><a href="./doublePendulum.html"> Double Pendulum</a></li>
<li><a href="./elasticDoublePendulum.html"> Elastic Double Pendulum</a></li>
<li><a href="./RKvsEC.html"> Runge-Kutta vs. Euler-Cromer </a></li>
<li><a href="../oceanography/bobInWater.html"> Dynamics of Body in the Ocean </a></li>
</ul>
</div>
<div class="cPP">
<button>C </button>
</div>
</div>
</nav>uj5u.com熱心網友回復：
感謝 Sean 的建議，修復方法是確保錨點不被串列覆寫，這樣我們就可以點擊錨點中的鏈接而不是串列元素。這是 CSS 中的修復：
a{
z-index: 100;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359302.html
上一篇：拖放和調整大小重疊