Родители/дети jQuery во вложенных списках

Question

В jQuery родители() и дети() не ведут себя так, как я ожидаю, с вложенными списками. Пример:

<ul> 
    <li>item 1 
     <ul> 
      <li>item a</li> 
      <li>item b 
       <ul> 
        <li>item i</li> 
       </ul> 
      </li>   
      <li>item c</li> 
     </ul> 
    </li> 
    <li>item 2</li> 
</ul> 

и JavaScript:

$('li').click(function(event) { 
    $('ul').not($(this).parents()).hide(); 
    $(this).children().show(); 
}); 

Если я нажимаю "пункт б", а затем 'Пункт I' скрывает. Кажется, что «item i» является дочерним элементом «item b» и должен отображаться значением $ (this) .children(). Show()

У меня проблема с синтаксисом, или я неправильно истолковываю детей/родителей в DOM?

См. https://jsfiddle.net/8o71yfpf/ для примера.

Answer 1

вы должны использовать event.stopPropagation();

при нажатии на внутренней Li вы также нажав на родительском ли.

обновленный https://jsfiddle.net/8o71yfpf/2/

это может помочь понять DOM обхода http://www.richfinelli.com/understanding-dom-traversal-in-jquery/