Как выбрать дочернюю строку ul, а не родительскую ul?

Question

У меня есть «дерево» информации, которая отображается во многих вложенных списках (ul li ul li ....). Две проблемы:

1. Когда я нажимаю <li>, родительский ul также переключается, а также ребенок.
2. Если я нажимаю на <li> во вложенном списке, который не имеет в нем ul (например, Blue под Cranberry ниже), то родительский ul переключается, хотя это не должно соответствовать «li.has (ul) ».

Я пробовал различные селекторы JQuery, следующие (ul), children(). First() и т. Д. С теми же результатами. Не повезло - хотя я уверен, что я просто пропустил что-то простое здесь.

JSFiddle.

$('li.has(ul)').click(function() { 
    $(this).children('ul').toggle(); 
}); 

И HTML:

<ul class="unstyled" id="full_ontology"> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Cranberry 
     <ul> 
      <li>Blue</li> 
      <li>Red 
       <ul> 
        <li>Round</li> 
        <li>Square</li> 
        <li>Circular</li> 
       </ul> 
      </li> 
      <li>Purple</li> 
     </ul> 
    </li> 
    <li>Date</li> 
    <li>Elderberry 
     <ul> 
      <li>Yellow</li> 
      <li>Pink</li> 
      <li>Black</li> 
     </ul> 
    </li> 
    <li>Fig</li> 
</ul> 

Answer 1

Проблема заключается в распространении событий, предотвратить его

$('li:has(ul)').click(function (e) { 
    $(this).children('ul').addClass('thisOne').toggle(); 
}); 
$('li').click(function (e) { 
    e.stopPropagation(); 
}); 

Демо: Fiddle

Answer 2

Это все о распространении.

Здесь работает JavaScript:

$('li').click(function(e) { 
    if ($(this).has('ul')) { 
     $(this).children('ul').addClass('thisOne').toggle(); 
    } 

    e.stopPropagation(); 
}); 

JSFiddle: http://jsfiddle.net/zkFGU/3/

В принципе, сначала вы хотите, чтобы это событие на все элементы списка, а не только те, которые имеют ул. Причина в том, что если вы этого не сделаете, вы не сможете прекратить распространение. Например, «Синий» под «Cranberry» не имеет списка, поэтому он не будет вызывать событие. Тем не менее, поскольку «Синий» на самом деле находится в «Клюква», который является элементом списка, и вызывает действие, нажав «Синий», нажав «Клюква», поэтому Клюкберри убирается. Предоставляя Синему возможность шанса прекратить распространение, это предотвращает ошибочное разрушение Клюквы.

Другая часть прекращения распространения - это просто остановить родителей. Нам нужен только элемент, на который мы непосредственно нажали (который запускается первым), и никакой другой элемент, который нужно (пытаться) переключить.