基于UL构建二叉树：点击LI添加UL时遇重复添加及多余LI问题

我来帮你排查并解决这两个问题，咱们一步步拆解：

问题1：点击<li>时列表被重复添加两次（比如点击list1时） #

这个问题是事件冒泡导致的：当你点击新添加的list1时，点击事件会向上冒泡到它的父<li>（也就是最初的那个sdfsdf），两个<li>元素的点击事件都会被触发，所以会执行两次append操作，最终列表被添加两次。

问题2：<ul>中出现额外的<li>元素 #

每次点击<li>都会直接追加新的<ul>，完全没判断当前<li>下是否已经存在子列表。多次点击同一个<li>后，会生成多个重复的子<ul>，每个<ul>里又包含两个<li>，看起来就像出现了额外的<li>元素。

修正后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="tree">
  <li>sdfsdf</li>
</ul>
<script>
$('#tree').on('click','li', function(event){
  // 阻止事件向上冒泡，避免父级<li>的点击事件被触发
  event.stopPropagation();
  // 先检查当前<li>下是否已有子<ul>，没有才添加新列表
  if(!$(this).children('ul').length){
    $(this).append('<ul style="display:block;"><li>list1</li><li>list2</li></ul>');
  }
});
</script>

关键改动说明 #

• event.stopPropagation()：彻底阻断事件冒泡路径，点击子<li>时只会触发自身的点击事件，不会触发父<li>的，直接解决重复添加两次的问题。
• !$(this).children('ul').length：通过判断子元素数量，确保每个<li>下只会被添加一次子列表，避免生成重复的额外元素。

这样修改后，点击任意<li>都只会在它下方生成一次子列表，再也不会出现重复或额外元素的问题啦。

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