Question

我的问题是我只希望Header 1和Header 2调用click函数。如果我点击列表项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

使用>只获取孩子的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(); 
    });

});

Answer 2

我将如何做到这一点：

$( 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/

列表上的单击功能不应影响嵌套的ul

2 个答案: