单击锚链接仅有时有效

Question

我已经在我的网站上添加了下拉菜单，但是运行遇到了一个问题，即我的 link 在单击时并不总是有效。有时单击 link 只会使下拉菜单消失，但如果您继续尝试，最终它会带您到您想要去的地方。

我最初怀疑它与过渡持续时间有关，但是尝试 transitions/waiting 让过渡在单击之前完成似乎没有任何改变。

这是下拉菜单导航栏的 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">&nbsp;1-D Kinematics</a></li>
        <li><a href="./pendulumFriction.html">&nbsp;Damped Pendulum</a></li>
        <li><a href="./drivenPendulum.html">&nbsp;Driven Pendulum</a></li>
        <li><a href="./elasticPendulum.html">&nbsp;Elastic Pendulum</a></li>
        <li><a href="./doublePendulum.html">&nbsp;Double Pendulum</a></li>
        <li><a href="./elasticDoublePendulum.html">&nbsp;Elastic Double Pendulum</a></li>
        <li><a href="./RKvsEC.html">&nbsp;Runge-Kutta vs. Euler-Cromer </a></li>
        <li><a href="../oceanography/bobInWater.html">&nbsp;Dynamics of Body in the Ocean </a></li>
      </ul>
    </div>
    <div class="cPP">
      <button>C++</button>
    </div>
  </div>
</nav>

Answer 1

您可能需要执行以下两项操作来解决此问题。

设置 a 标签的样式，使其完整 width/height（更易于点击）
将 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">&nbsp;1-D Kinematics</a></li>
        <li><a href="./pendulumFriction.html">&nbsp;Damped Pendulum</a></li>
        <li><a href="./drivenPendulum.html">&nbsp;Driven Pendulum</a></li>
        <li><a href="./elasticPendulum.html">&nbsp;Elastic Pendulum</a></li>
        <li><a href="./doublePendulum.html">&nbsp;Double Pendulum</a></li>
        <li><a href="./elasticDoublePendulum.html">&nbsp;Elastic Double Pendulum</a></li>
        <li><a href="./RKvsEC.html">&nbsp;Runge-Kutta vs. Euler-Cromer </a></li>
        <li><a href="../oceanography/bobInWater.html">&nbsp;Dynamics of Body in the Ocean </a></li>
      </ul>
    </div>
    <div class="cPP">
      <button>C++</button>
    </div>
  </div>
</nav>

Answer 2

感谢 Sean 的建议，修复是为了确保锚点不被列表覆盖，这样我们就可以单击锚点中的链接而不是列表元素。这是 CSS 中的修复：

a{
z-index: 100;
}

单击锚链接仅有时有效

Clicking on anchor links only works sometimes

html

css

href

anchor