如何让WordPress Bootstrap导航菜单父级链接不跳转

我太懂这个坑了——Bootstrap导航在桌面端靠hover展开下拉没问题，但到了移动端，点击父级菜单时，浏览器会优先执行跳转，导致下拉刚闪出来就跳走了，哪怕把链接改成#也会触发页面滚动刷新，巨烦！

别着急，不用改WordPress菜单里的父级链接（保持原来的页面链接就行，桌面端用户还能正常点击跳转），只需要加一段简单的JS代码，就能实现「移动端点击父菜单只展开下拉、不跳转，桌面端保持原有hover+点击跳转」的效果。

第一步：添加自定义JavaScript代码 #

把这段代码加到你的WordPress站点里（方法后面说）：

document.addEventListener('DOMContentLoaded', function() {
  // 抓取所有带下拉菜单的父级导航链接
  const parentLinks = document.querySelectorAll('#nav .menu-item-has-children > a');
  
  parentLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 这里用Bootstrap默认的移动端断点768px，你可以根据自己主题调整
      if (window.innerWidth < 768) {
        // 阻止链接跳转的默认行为
        e.preventDefault();
        // 找到当前链接的父菜单项，切换下拉显示状态
        const parentItem = this.closest('.menu-item-has-children');
        parentItem.classList.toggle('open');
      }
      // 桌面端（宽度≥768）啥也不做，保留原有的hover展开+点击跳转
    });
  });
});

怎么添加这段代码？

• 如果你能编辑主题的footer.php文件，把这段代码放在</body>标签的前面就行；
• 很多主题在后台「外观」→「自定义」里有「额外JS」的选项，直接粘贴进去；
• 嫌麻烦的话，装个简单的插件比如「Custom CSS & JS」，在插件里添加这段JS代码。

第二步：配合CSS优化显示（可选） #

如果你的主题没有默认处理移动端下拉的样式，加一点CSS确保点击后下拉菜单能正常显示：

@media (max-width: 767px) {
  /* 点击父菜单后，显示子菜单 */
  #nav .menu-item-has-children.open .sub-menu {
    display: block !important;
  }
  /* 给父链接加个小箭头，提示用户可以展开 */
  #nav .menu-item-has-children > a:after {
    content: "▼";
    margin-left: 6px;
    font-size: 12px;
  }
}

这段CSS可以加到「外观」→「自定义」→「额外CSS」里。

为啥不用把父链接改成#？ #

改成#的话，桌面端用户点击父链接会直接跳转到页面顶部，体验很差。用上面的方法，桌面端用户hover展开下拉后，想跳转到父页面还是可以正常点击，移动端用户点击只会展开下拉，完美兼顾两种场景。

内容的提问来源于stack exchange，提问作者anna