无序列表树无法正常工作

我有一棵树，我使用无序列表，树需要基于在HTML框架上找到的属性创建，这是我在折叠/展开时遇到的唯一问题该树是当我点击一个孩子崩溃了整个事情，我怎样才能防止整个节点崩溃。无序列表树无法正常工作

任何帮助将不胜感激！

这里是我的代码

要发现出了问题，点击firstItem2然后单击SecondItem4展开它，你会发现，整个事情崩溃。

$(".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(); 
 
});

<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>

来源

2016-01-20 Kyle

调整一些东西后，我没能禁用通过单击上-ME-你 - 是 - 点击 - 上 - 我的父母的特征，所以我决定改变HTML而不是属性。

这里是能够创造：

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

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

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

.branch { 
 
    margin-left: 10px; 
 
    }

<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>

来源

2016-01-20 18:47:10 Kyle

无序列表树无法正常工作

回答

相关问题