Dismissing Drop Down List when List Item Clicked

Question

I have a drop down list that is activated on hover (and dismissed on hover leave). It works fine insofar as the hover is concerned. When a user clicks one of the list items in the drop down list, I want the drop down list to be dismissed, just as if they have moved their mouse away from the list. This is where I am stuck.

$(document).ready(function () { 
    $('.navigation li').hover(
        function () {
            $('ul', this).fadeIn();
        }, 
        function () {
            $('ul', this).fadeOut();        
        }
    );

    // this is where I am attempting to dismiss the drop down list
    // the console output appears just fine, but the drop down list does not
    // go away.
    $('.navigation li').click(function () {
        console.log("clicked");
        $('.ul', this).fadeOut();
    });
});

It may be of interest to note that the console output appears twice for each click. Not sure what that suggests...

Answer 1

You are targeting a class of ul , not a <ul> tag.

Change the last code to:

$('.navigation li').click(function () {
    console.log("clicked");
    $('ul', this).fadeOut(); // changed
});

It's often the simple things. :-)