Функция щелчка по списку не должна влиять на вложенную ul

Question

Моя проблема в том, что я хочу, чтобы только заголовок 1 и заголовок 2 вызывали функцию щелчка.Если я нажму на элемент списка 1.1 и т. Д., Я хочу, чтобы ничего не произошло.Как и сейчас, нажатие на любой элемент списка вызовет событие.

Javascript

$(document).ready(function() {
    $("ul#nav li ul").hide(); 
    $("ul#nav li").click(function() {
        $("ul#nav li").removeClass("current"); 
        $(this).addClass("current"); 
        $("ul#nav li ul").slideUp('fast'); 
        $(this).find("ul").slideDown('fast');
    });
});

HTML

    <ul id="nav">  
        <li><a href="#">Header 1</a>
        <ul>
           <li>List item 1.1</li>
           <li>List item 1.2</li>
           <li>List item 1.3</li>
        </ul>
        </li>
       <li><a href="#">Header 2</a>
       <ul>
           <li>List item 2.1</li>
           <li>List item 2.2</li>
           <li>List item 2.3</li>
       </ul>
       </li>
    </ul>

Я просмотрел пару похожих вопросови ответы, но они не совсем помогли мне решить проблему.

Answer 1

Вот как бы я это сделал:

$( nav ).delegate( 'li', 'click', function () {   
    if ( !$( this ).parent().is( nav ) ) { return false; }  
    $( this ).siblings( '.' + clss ).removeClass( clss ).children( 'ul' ).slideUp( 'fast' );
    $( this ).addClass( clss ).children( 'ul' ).slideDown( 'fast' )
});

Живая демоверсия: http://jsfiddle.net/WsZdJ/4/

Answer 2

Используйте >, чтобы получить только детей li, а не всех потомков li.

<ul id="nav">  
    <li><a href="#">Header 1</a></li>
    <ul>
       <li>List item 1.1</li>
       <li>List item 1.2</li>
       <li>List item 1.3</li>
    </ul>

   <li><a href="#">Header 2</a></li>
   <ul>
       <li>List item 2.1</li>
       <li>List item 2.2</li>
       <li>List item 2.3</li>
   </ul>

</ul>


$(document).ready(function() {
    $("ul#nav ul").hide(); 

    $("ul#nav > li").click(function(e) {
        if( $(this).hasClass('current') )
        {
          $(this).removeClass("current"); 
          $("ul#nav ul").slideUp('fast');
        }
        else 
        {  
          $('.current').removeClass('.current');             
          $(this).addClass("current");         
          $(this).next().slideDown('fast');
        }
        e.preventDefault(); 
    });

});