Question

My problem is that I only want Header 1 and Header 2 to call the click function. If i click on List item 1.1 etc I want nothing to happen. As it is now, clicking on any list item will call the event.

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>

I have looked through a couple of similar questions and answers but they did not quite help me to solve the problem.

Answer 1

Here’s how I would do it:

$( 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' )
});

Live demo: http://jsfiddle.net/WsZdJ/4/