带Href链接与可折叠头部的jQuery Accordion菜单异常问题求助

嘿，这个问题我之前做多层Accordion菜单时也踩过坑！核心原因就是事件冒泡——你点了子级的头部，事件会顺着DOM树往上跑，触发父级头部的折叠逻辑。给你几个实用的解决办法：

• 阻止事件冒泡（最常用）
  在子级头部的点击事件里，阻止事件向上传递到父元素。注意如果你的<a>标签需要正常跳转，别用return false（它会同时阻止冒泡和默认跳转），用event.stopPropagation()就好：

  $('.acc-header').on('click', function(e) {
    // 判断当前点击的头部是否属于子级Accordion
    const isChildAccordion = $(this).closest('.accordion').parent().closest('.accordion').length > 0;
    if (isChildAccordion) {
      e.stopPropagation(); // 阻止事件冒泡到父级
    }
    
    // 执行折叠/展开逻辑
    $(this).siblings('ul.accordion').slideToggle();
    $(this).siblings('h3').text((i, text) => text === '+' ? '-' : '+');
    
    // 如果不需要链接跳转，再加这句：e.preventDefault();
  });
  

  这里用closest()判断当前元素所在的Accordion是否有外层父Accordion，以此区分层级，只在子级时阻止冒泡。

• 给不同层级加专属类，独立绑定事件
  给不同层级的Accordion和头部加不同的类名，分别绑定事件，让各层级逻辑完全独立：

  <ul class="accordion level-1">
    <li>
      <a class="acc-header level-1-header" href="#">menu - level 1</a>
      <h3>+</h3>
      <ul class="accordion level-2">
        <li>
          <a class="acc-header level-2-header" href="#">menu - level 2-1</a>
          <h3>+</h3>
          <ul class="accordion level-3">...</ul>
        </li>
      </ul>
    </li>
  </ul>
  

  // 一级菜单逻辑
  $('.level-1-header').on('click', function() {
    $(this).siblings('ul.level-2').slideToggle();
    $(this).siblings('h3').text((i, text) => text === '+' ? '-' : '+');
  });
  
  // 二级菜单逻辑
  $('.level-2-header').on('click', function() {
    $(this).siblings('ul.level-3').slideToggle();
    $(this).siblings('h3').text((i, text) => text === '+' ? '-' : '+');
  });
  

  这种方式逻辑清晰，后期维护也方便，适合层级固定的菜单。

• 判断事件目标，过滤非当前层级的触发
  在头部的点击事件里，检查触发事件的目标是不是当前头部元素，如果不是就直接返回，避免父级因为子级冒泡而执行逻辑：

  $('.acc-header').on('click', function(e) {
    // 只有点击的目标就是当前头部时，才执行折叠逻辑
    if (e.target !== this) return;
    
    $(this).siblings('ul.accordion').slideToggle();
    $(this).siblings('h3').text((i, text) => text === '+' ? '-' : '+');
  });
  

  这个方法简单直接，不用区分层级，只要确保点击的是当前头部元素才执行对应逻辑。

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