nested li - on clicking child, parent click event triggered [duplicate]

Answer 1

// will prevent the event to bubble up the DOM and so avoid parent attached handlers to be triggered
e.stopPropagation();

Since the structure is the same for both menu levels, I would attach a single handler to the to top menus container and test whether the click accured against a <a> tag (followed by an ul element) or not then if true process the sibling menu.

like so ..

/* Event delegation menu click */
$('#root').on('click', function(e){
    var $t = $(e.target).closest('a'),
        $ul = $t.nextAll('ul').eq(0);
    if($t.length && $ul.length){
        $ul.toggleClass('open').slideToggle();
    }
});

fiddle Here