restrict click logic to parent li tag

Question

I have the following structure for a mobile menu.

<nav id="mobile-menu" class="fa fa-bars">
    <ul id="#menu-header-menu-mobi" class="menu" style="display: block;">
        <li id="menu-item-27-mobi" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-27"><a href="javascript:;">About Us</a>

            <ul class="sub-menu">
                <li id="menu-item-24-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/Sites/wp/?page_id=4">Our Environment</a>
                </li>
                <li id="menu-item-25-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/Sites/wp/?page_id=6">Our History</a>
                </li>
                <li id="menu-item-23-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost/Sites/wp/?page_id=8">Executive Team</a>
                </li>
                <li id="menu-item-22-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/Sites/wp/?page_id=10">Core Values</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-28-mobi" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28"><a>Companies</a>

        </li>
        <li id="menu-item-20-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/Sites/wp/?page_id=12">Careers</a>
        </li>
        <li id="menu-item-19-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://localhost/Sites/wp/?page_id=16">Blog</a>
        </li>
        <li id="menu-item-21-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/Sites/wp/?page_id=14">Contact</a>
        </li>
    </ul>
</nav>

I then have the following javascript to open and close the menu item that has children.

$("#header nav#mobile-menu li.menu-item-has-children").on("click", function (event) {
    event.preventDefault();
    var t = $(this);
    var sub = t.children("ul.sub-menu");
    if (sub.hasClass("open")) {
        sub.removeClass("open");
    } else {
        sub.addClass("open");
    }
    return false;
});

This works but the problem is that when I click a child item, this script is run again because the child item is contained within the parent li tag. Is there a way I can rework this to get the same functionality but still have the links in the child li tags work? Thanks.

possible duplicate of [What's the difference between event.stopPropagation and event.preventDefault?](http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault) — Chris Baker, Nov 11 '14 at 20:10
The term is "bubbling" -- had you used vanilla javascript to bind the event you could pass `true` as the seldom-used third parameter of `addEventListener`. With a framework (jQuery et al), you must use `stopPropagation` as indicated by Vega. This isn't really a jquery thing, but a javascript concept, see also: https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation — Chris Baker, Nov 11 '14 at 20:13

score 2 · Answer 1 · answered Nov 11 '14 at 20:07

2

You can use event.stopPropagation to stop event from bubbling to parent elements.

answered Nov 11 '14 at 20:07

Selvakumar Arumugam

79,297
15
120
134

score 1 · Accepted Answer · answered Nov 11 '14 at 20:14

You can also check to see that the event is originating from the list item, and not it's children

$("#mobile-menu li.menu-item-has-children").on("click", function(event){

    if (event.target === this) {

        event.preventDefault();
        $(this).children("ul.sub-menu").toggleClass('open');

    }
});

restrict click logic to parent li tag

2 Answers2