Question

I am currently learning the api of Jquery. I understand Jquery has a hover function as reflected below:

hover( handlerIn(eventObject) , handlerOut(eventObject))

With the second handlerOut(eventObject), I can handle events like collapsing a menu tree when it is not hovered over.

I then looked at the api for the click function as reflected below:

.click( [eventData], handler(eventObject) )

Similar to what I want to achieve in my previous description, I have a menu tree. When a list item is clicked, it will dropdown to a submenu. My question is how do I collapse this submenu tree when I click out of the menu or click on other items?

lastly, I am using jquery-1.2.6.min.js to achieve this.

My jQuery:

 $("li.p1:has(ul)").click(function(event){
    if (this == event.target) {
    var current = this;
    $("#nav li:has(ul)").each(function() {
        if (this != current) $(this).children().slideUp(400);
    });
        $("ul:first", $(this)).slideToggle(400);
    }
    },function(){$(this).children().slideUp(400);});

My HTML:

    <div id="wrap">
    <ul id="nav">
    <li class="p1 down">Manage Subject
        <ul>
            <li><a href="#url">Add Subject</a></li>
            <li><a href="#url">Edit Subject</a></li>
            <li><a href="#url">Delete Subject</a></li>
            <li><a href="#url">Export Subject</a></li>
        </ul>
    </li>
    <li><a href="#url">Manual Crawling</a></li>
    <li><a href="#url">Crawl Interval</a></li>
    <li><a href="#url">Search Parameter</a></li>
    </ul>
    </div>

Answer 1

One way that I can think of is to create an event handler for the ‘body’ element.

$('body').click(function(event){
   //Needs validation.
   if ($('li.p1:has(ul)') != event.target) {
        $("#nav li:has(ul)").each(function() {
            if (this != current) $(this).children().slideUp(400);
        });
    }
});

The aim is to add an event handler to the ‘body’ element and probe to see whether the intended element was clicked. If not, then slide it up. I think the same can be done in a better fashion.