jquery - 列表上的单击功能不应影响嵌套 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/