无序列表树无法正常工作

Question

我有一棵树，我使用无序列表，需要根据HTML框架上的属性创建树，我在折叠/展开树时遇到的唯一问题是当我点击一个孩子它折叠了整个东西时，我怎么能阻止整个节点崩溃。

任何帮助将不胜感激！

这是我的代码

要发现问题，请点击 firstItem2 ，然后点击 SecondItem4 进行扩展，您会注意到整个事情已崩溃。

＆＃13;

＆＃13;

$(".branch").each(function() {
  if ($(this).attr('dad') !== "") {
    $(this).stop().hide(500);
  }
});
$('.branch').on('mousedown', function() {
  dad = $(this).attr('id');
  toggleChildren(dad);
});

function toggleChildren(dad) {
  $('.branch').each(function() {
    if ($(this).attr('dad') == dad) {
      if ($(this).is(':visible') === false) {
        $(this).stop().show(500);
      } else {
        $(this).stop().hide(500);
      }
      //console.log("DAD: "+dad+"\nID: "+$(this).attr('id')+'\nDATA: '+$(this).text());
    }
  });
}
$('#node3').on('mousedown', function(e) {
  e.stopPropagation();
});

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul id="menu">
  <li id="node1" dad="" class="branch">firstItem1
    <ul>
      <li id="node2" dad="node1" class="branch">SecondItem1</li>
    </ul>
  </li>
  <li id="node3" dad="" class="branch">firstItem2
    <ul>
      <li id="node4" dad="node3" class="branch">SecondItem2</li>
      <li id="node5" dad="node3" class="branch">SecondItem3</li>
      <li id="node6" dad="node3" class="branch">SecondItem4
        <ul>
          <li id="node7" dad="node6" class="branch">ThirdItem1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在调整了一些内容后，我无法禁用点击我点击我的父级功能，因此我决定更改HTML但不是属性。

以下是能够创建的内容：

＆＃13;

＆＃13;

	$('.branch').on('mousedown', function() {
	  dad = $(this).attr('id');
	  toggleChildren(dad);
	});

	function toggleChildren(dad) {
	  $('.branch').each(function() {
	    if ($(this).attr('dad') == dad) {
	      if ($(this).is(':visible') === false) {
	        $(this).stop().show(500);
	      } else {
	        $(this).stop().hide(500);
	      }
	      iterateChildren(this);
	    }
	  });
	}

	function iterateChildren(item) {
	  dad = $(item).attr('id');
	  $('.branch').each(function() {
	    if ($(this).attr('dad') == dad) {
	      if ($(this).is(':visible') !== false) {
	        $(this).stop().hide(500);
	      }
	      iterateChildren(this);
	    }
	  });
	}
	$('.branch').each(function() {
	  dad = $(this).attr('dad');
	  marginLeft = $('#' + dad).css('margin-left');
	  $(this).css({
	    'margin-left': parseInt(marginLeft, 10) * 2
	  });
	});
	$(".branch").each(function() {
	  if ($(this).attr('dad') !== "") {
	    $(this).stop().hide(500);
	  }
	});

＆＃13;

  .branch {
    margin-left: 10px;
  }

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<ul id="menu">
  <div id="node1" dad="" class="branch">firstItem1</div>
  <div id="node2" dad="node1" class="branch">SecondItem1</div>
  <div id="node3" dad="" class="branch">firstItem2</div>
  <div id="node4" dad="node3" class="branch">SecondItem2</div>
  <div id="node5" dad="node3" class="branch">SecondItem3</div>
  <div id="node6" dad="node3" class="branch">SecondItem4</div>
  <div id="node7" dad="node6" class="branch">ThirdItem1</div>
</ul>

＆＃13;

＆＃13;

＆＃13;