Question

I have a ul li sublist with toggle.

ul
   li a.trigger
       ul.sub_list li
   li
   li

Event – click.

When I click the a.trigger, ul.sub_list will show.
To hide ul.sub_list. I need to click the a.trigger or html element.

The problem is how to stop html from hide() ul.sub_list when user click ul.sub_list items.

example: http://jsfiddle.net/zYgfr/

this is like facebook notification.

Answer 1

Add this:

$(".sub_list a").click(function(event){
       event.stopPropagation();
});

The concept is that, by default, when an element is clicked, it propagates up through the DOM.

So when the link is clicked, eventually after propagation to each parent, the event will reach the HTML root element, triggering any event handlers along its path.

To stop that, we call event.stopPropagation().