javascript - 如果单击 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 时要好将隐藏该 sibling 。

附图上有说明:

问题是单击 ul#menu li.menuGroup ul li span 时菜单项会隐藏元素，仅用于提供信息(副标题)，不应切换任何事件。但我的实现允许这样做。如何防止它在这里:

    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但不是它的 child <li><span>SubTitle<span></strong>

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

注意:您的 fiddle 代码与此处的示例不匹配。在 fiddle 中，您可以检查 if(e.target.className != 'title')。

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