0

我在菜单上有这个棘手的情况：

<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，这仅用于信息目的（子标题），不应切换任何事件。但我的实现允许这样做。如何在这里防止它：

    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/

4

4 回答 4

2

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

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/

于 2013-09-15T15:46:06.250 回答
1

尝试

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

演示：小提琴

于 2013-09-15T15:45:10.743 回答
0

如何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
});
于 2013-09-15T15:48:41.947 回答
0

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

于 2013-09-15T15:46:22.310 回答