如果单击jQuery元素的子元素而不是元素本身，则会中断函数

Question

菜单中有这种棘手的情况：

<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>

最初只有<strong>元素才可见。点击它时会显示ul兄弟。

比点击li.menuGroup时会隐藏那个兄弟。

它附在图片上：

问题是单击ul#menu li.menuGroup ul li span元素时隐藏菜单项，这仅用于信息目的（SubTitle），不应切换任何事件。但是我的实现允许这样做。如何在这里预防：

    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();
        }
    });

所以我想在点击任何元素.menuGroup时切换元素1,2,3但不是它的孩子<li><span>SubTitle<span></strong>

小提琴：http://jsfiddle.net/eCQEH/

Answer 1

点击的元素可用作事件目标，因此您可以检查：

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();
        }
    }
});

注意：您的小提琴代码与此处的示例不符。在小提琴中，您可以查看if(e.target.className != 'title')。

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

Answer 2

尝试

    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();
        }
    });

演示：Fiddle

Answer 3

请改为使用$('#menu > li');来仅选择直接子项。

Answer 4

如何将类dontHideOnClickElement放在您不想添加的元素上，单击并隐藏侦听器然后 -

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

在你的代码中，我看到你已经为这些元素使用了title类，所以代码就是 -

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