Дерево неупорядоченных списков не работает должным образом

Question

У меня есть дерево, в котором я использую неупорядоченный список, дерево нужно создать на основе атрибутов, найденных на фрейме 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>

Answer 1

После настройки некоторых вещей, я не был в состоянии отключить побочные мыши-на-меня-вы-это-щелчок-на-моего-родительский компонент, так что я решил изменить 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>