JQuery .fadeToggle()异常：触发后元素自动淡出问题排查

核心问题：HTML结构错误 #

你的代码出现点击后元素淡入立即淡出的现象，完全是HTML标签嵌套错误导致的：

• 原代码中，<li class="has">内部的label之后错误地闭合了.tree的<ul>标签，导致后续的隐藏<ul>被放到了.tree的<ul>外部，脱离了li.has的层级。
• 后续的</li></ul>又试图闭合不存在的标签，浏览器会自动修正DOM结构，最终造成事件触发逻辑混乱——比如fadeToggle()被意外执行两次，直接表现为元素刚淡入就淡出。

修正后的代码 #

HTML（修复嵌套结构）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tree">
  <li class="has">
    <label class="container">ROOT<span class="total">(12) </span>
      <input type="checkbox" name="domain[]" value="ROOT">
      <span class="checkmark"></span>
    </label>
    <!-- 将隐藏ul放在li.has内部，作为label的相邻元素 -->
    <ul style="display: none;">
      <li>
        <label class="container">CHILD
          <input type="checkbox" name="subject[]" value="CHILD">
          <span class="checkmark"></span>
        </label>
      </li>
    </ul>
  </li>
</ul>

JavaScript（逻辑无需修改，结构修复后即可正常工作）

$(document).on('click', '.tree label', function(e) {
  $(this).next('ul').fadeToggle();
  e.stopPropagation();
});

补充说明 #

修复结构后，$(this).next('ul')能正确选中label相邻的隐藏ul，点击事件的触发逻辑也恢复正常，不会再出现重复执行fadeToggle()的情况。

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