jQuery Toggle父/子标签

Question

I'm attempting to build a jQuery/CSS mobile menu which has expand buttons for the child ul/li tags.

The expand button works fine for "parent > child" items, but not for "parent > child > child" items or any other nested items, when I click on the expand button for a child it closes the parent.

The code I'm working with is here: http://jsfiddle.net/tbxw39hq/

// Mobile Menu Toggle
$(".mobile-menu li").click(function() {
    $(".sub-menu", this).toggle();
});

// Add Expand To Mobile Menu
$('.mobile-menu li:has(ul.sub-menu)').append('<div class="menu-expand">+</div>');

Any help much appreciated!

Thanks

Answer 1

You need to stop event propagation to child elements:

$(".mobile-menu li").click(function(e) {
    e.stopPropagation();
    $(">.sub-menu", this).toggle();
});

Working Demo