点击链接触发slideToggle同时保留页面跳转功能的实现方案

问题背景 #

我负责的网站有一个点状导航（dot navigation），其中一个导航项带有子菜单。最初用jQuery的slideToggle()方法，通过hover事件触发子菜单显示/隐藏，但出现弹跳问题，就改成了点击事件实现：

$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
  e.preventDefault();
  $(this).siblings('.sub-menu').slideToggle('800');
});

但这么做必须加e.preventDefault()才能触发子菜单，导致顶级链接的页面跳转功能被禁用。现在需要实现：既能通过点击或hover触发子菜单显示/隐藏（无弹跳问题），又能保留顶级链接的跳转功能。

菜单HTML结构如下：

<div class="menu-primary-container">
  <ul id="troy-dot-nav" class="menu reverse-dots">
      <li class="..."><a href="...">About</a></li>
      <li class="... menu-item-81">
          <a href="...">Integrated Services</a>
          <ul class="sub-menu" style="display: none;">
              <li class="..."><a href="...">EPC &amp; Project Services</a></li>
              <li class="..."><a href="...">Pipeline Construction</a></li>
              <li class="..."><a href="...">Facility Construction</a></li>
              <li class="..."><a href="...">Integrity Management</a></li>
          </ul>
      </li>
      <li class="..."><a href="...">Safety &amp; Quality</a></li>
      <li class="..."><a href="...">Careers</a></li>
      <li class="..."><a href="...">Contact Us</a></li>
  </ul>
</div>

注：导航的点状样式通过CSS的li:after伪元素实现，此处已简化HTML结构。

解决方案 #

方案1：修复Hover事件的弹跳问题

弹跳问题多因hover事件在子菜单与父元素间频繁触发导致，改用mouseenter/mouseleave并配合动画终止方法即可解决：

// 绑定事件到父li，避免鼠标进入子菜单时触发切换
$("#troy-dot-nav li.menu-item-81").on('mouseenter', function() {
  $(this).find('.sub-menu').stop(true, true).slideDown(800);
}).on('mouseleave', function() {
  $(this).find('.sub-menu').stop(true, true).slideUp(800);
});

• stop(true, true)会终止当前动画并清空动画队列，彻底避免因多次触发导致的弹跳
• 事件绑定在父li而非a标签上，确保鼠标移到子菜单内时不会触发mouseleave

方案2：点击触发子菜单+保留顶级链接跳转

如果偏好点击触发逻辑，可通过判断子菜单状态决定是否阻止默认跳转行为：

$("#troy-dot-nav li.menu-item-81 > a").click(function(e) {
  const subMenu = $(this).siblings('.sub-menu');
  
  // 子菜单隐藏时，展开并阻止跳转；已展开时允许跳转
  if (subMenu.is(':hidden')) {
    e.preventDefault();
    subMenu.slideDown(800);
  }

  // 可选逻辑：点击切换子菜单状态，仅在第二次点击时跳转
  // if (subMenu.is(':visible')) {
  //   subMenu.slideUp(800);
  //   e.preventDefault();
  // } else {
  //   subMenu.slideDown(800);
  // }
});

方案3：新增独立切换按钮（推荐）

给父导航项添加独立的子菜单切换按钮，完全分离“跳转”和“展开子菜单”的操作，用户体验更清晰：

1. 修改HTML，添加切换元素：

<li class="... menu-item-81">
    <a href="...">Integrated Services</a>
    <span class="sub-menu-toggle">▼</span>
    <ul class="sub-menu" style="display: none;">
        <!-- 子菜单内容 -->
    </ul>
</li>

2. 绑定切换按钮的点击事件：

$("#troy-dot-nav .sub-menu-toggle").click(function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父级a标签
  $(this).siblings('.sub-menu').slideToggle(800);
});

可以用CSS给.sub-menu-toggle设置样式，让它看起来像一个按钮，比如放在a标签右侧。

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