CODEWITHSUNDEEP
javascriptjquery
Szymon Toda
Szymon Toda

Reputation: 4516

Break out of function if clicked child of jQuery element but not the element itself

I have this tricky situation with menu:

<ul id="menu">
    <li class="menuGroup">
        <strong>Title</strong>
        <ul>
            <li><span>SubTitle<span></strong>
            <li><a>Element 1 of menu called Title</a></li>
            <li><a>Element 2 of menu called Title</a></li>
            <li><a>Element 3 of menu called Title</a></li>
        </ul>
    </li>
</ul>

Initially only <strong> element is only visible. When clicking on it's ul sibling is displayed.

Than when clicking on li.menuGroup will hide that sibling.

It's ilustraded on the attached image: enter image description here

The problem is that menu items hide when clicking ul#menu li.menuGroup ul li span element, which is only for information purposes (SubTitle) and should not toggle any event. But my implementation allows that. How to prevent it here:

    var el = $("#menu li");
    el.on("click", function() {
        var thisTabContents = $(this).children("ul");

        if (!thisTabContents.is(":visible")) {
            jq_TabContents.hide();
            thisTabContents.show();
        } else {
            thisTabContents.hide();
        }
    });

So I want to toggle elements 1, 2, 3 when clicking on any element .menuGroup but not it's child <li><span>SubTitle<span></strong>

Fiddle: http://jsfiddle.net/eCQEH/

Upvotes: 0

Views: 243

Answers (4)

Moazzam Khan
Moazzam Khan

Reputation: 3170

How about putting a class dontHideOnClickElement on the elements on which you dont want to add click and hide listener and then -

var el = $("#menu li").not(".dontHideOnClickElement");
el.on("click", function(e) {
   // some code
});

And in your code, I see you have used title class for those elements, So the code would be - 

var el = $("#menu li").not(".title");
el.on("click", function(e) {
   // some code
});

Upvotes: 0

OneOfOne
OneOfOne

Reputation: 99226

Use $('#menu > li'); instead, to only select the direct child.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71908

The clicked element is available as the event target, so you can check for that:

var el = $("#menu li");
el.on("click", function(e) {
    if(e.target.tagName != 'SPAN') {
       var thisTabContents = $(this).children("ul");

        if (!thisTabContents.is(":visible")) {
            jq_TabContents.hide();
            thisTabContents.show();
        } else {
            thisTabContents.hide();
        }
    }
});

Note: your fiddle code doesn't match the example here. In the fiddle, you can check if(e.target.className != 'title').

http://jsfiddle.net/eCQEH/1/

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Try

    el.on("click", function(e) {
        if(!$(e.target).is('strong')){
            return
        }
        var thisTabContents = $(this).children("ul");

        console.log(el);

        if (!thisTabContents.is(":visible")) {
            jq_TabContents.hide();
            thisTabContents.show();
        } else {
            thisTabContents.hide();
        }
    });

Demo: Fiddle

Upvotes: 1

Related Questions