Jquery - Clickable dropdown menu

Question

I am having an issue with my dropdown menu. I have the dropdown portion of the menu working, but when I click on a main navigational link it unveils all the list items instead of unveiling the ones relevant to the parent ul.

I have uploaded the file to jsfiddle.Could you please help me out: http://jsfiddle.net/7rwhP/1/

        <div id="secondary-nav"><!--secondary-nav-->    
            <ul>
               <li><a href="#.html">Current Article</a>
                    <ul>
                        <li><a href="#.html">Example 1</a></li>
                   </ul>
                </li>

               <li><a href="#.html">Past Articles</a>
                    <ul>
                         <li><a href="pages.html">Example 1</a></li>
                       <li><a href="#.html">Example 2</a></li>
                       <li><a href="#.html">Example 3</a></li>
                  </ul>
                </li>
                <li><a href="#.html">Tradition</a>
                    <ul>
                         <li><a href="pages.html">Example 1</a></li>
                       <li><a href="#.html">Example 2</a></li>
                       <li><a href="#.html">Example 3</a></li>
                  </ul>
                </li>
            </ul>   
        </div><!--/secondary-nav-->

Answer 1

You need to modify your JavaScript so you aren't triggering the slideToggle on all ul ul items, and you need to add the click listener to an li - using #secondary-nav ul will trigger that click event for any item you click within that list.

Try this:

$(document).ready(function(){
    $("#secondary-nav li").click(function(){
        //slide up all the link lists
        $(this).children('ul').slideToggle();
    })
})

Remember, selectors in jQuery are just like CSS selectors. When you bind the click event to #secondary-nav ul , it will be triggered when you click anywhere in that list, because all of the list items are indeed children of the ul. Your original click handler #secondary-nav ul ul says "toggle all lists that are a child of a list", but you more pointedly wanted to achieve "toggle the list that is a child of the clicked list item".

DEMO

Answer 2

you should use $(this).children()

DEMO

$(document).ready(function(){
    $("#secondary-nav li").click(function(){
        //slide up all the link lists
        $(this).children('ul').slideToggle();
    })
});

You should add this css too

#secondary-nav ul li {
white-space:nowrap;
}

DEMO :After applying above css