jQuery树形列表问题：仅让含直接UL子元素的LI触发slideToggle

问题描述 #

现有嵌套文件夹菜单结构，绑定了点击.folder元素切换子菜单的slideToggle效果，但点击菜单内的<a>标签时，虽然文件能正常打开，却会同时触发父级菜单的折叠/展开操作，需要避免这种误触发，仅在点击包含直接子<ul>的文件夹元素时才执行slideToggle。

原始代码 #

HTML结构

<ul id="Tree" class="sub-menu">
  <li class="folder">First level
    <ul class="sub-menu">
      <li><a href="pathtofile.pdf" target="_blank">File 1.1</a></li>
      <li class="folder">Second level
        <ul class="sub-menu">
          <li><a href="pathtofile.docx" target="_blank">File 2.1</a></li>
          <li><a href="pathtofile.pdf" target="_blank">File 2.2</a></li>
          <li class="folder">Tretji nivo
            <ul class="sub-menu">
              <li><a href="pathtofile.pdf" target="_blank">File 3.1</a></li>
              <li><a href="pathtofile.docx" target="_blank">File 3.2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

原始jQuery代码

$('.folder').click(function(event) {
  event.stopPropagation();
  $(this).find('>.sub-menu').slideToggle();
});

解决方案 #

可以通过两种方式实现需求：

方案1：阻止<a>标签的事件冒泡

给所有.folder下的<a>标签绑定点击事件，阻止事件向上冒泡到父级.folder元素：

// 阻止a标签的事件冒泡
$('.folder a').click(function(event) {
  event.stopPropagation();
});

// 保留原有的文件夹折叠逻辑
$('.folder').click(function(event) {
  event.stopPropagation();
  $(this).find('>.sub-menu').slideToggle();
});

方案2：在文件夹点击事件中判断触发目标

直接在.folder的点击事件里，判断点击的目标是否为<a>标签，同时检查当前文件夹是否包含直接子菜单，满足条件才执行slideToggle：

$('.folder').click(function(event) {
  event.stopPropagation();
  // 若点击的是a标签，或当前文件夹没有直接子菜单，则不执行折叠
  if ($(event.target).is('a') || !$(this).children('.sub-menu').length) {
    return;
  }
  $(this).find('>.sub-menu').slideToggle();
});

方案说明 #

• 方案1逻辑简单，直接切断了a标签事件向父级的传递，确保点击链接时仅触发跳转行为。
• 方案2更灵活，额外增加了对当前文件夹是否有子菜单的判断，避免无菜单的.folder元素触发无效操作。

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