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

我在菜单上遇到了一个棘手的情况：

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

因此，我想在单击任何元素时切换元素1、2、3。菜单组，但不是子元素

副标题

小提琴：试试看

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

演示：

试试看

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

---

演示：

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

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代码与这里的示例不匹配。在小提琴中，您可以检查

是否（e.target.className！=“title”）

---

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

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代码与这里的示例不匹配。在小提琴中，您可以检查

是否（e.target.className！=“title”）

---

使用

$（“#菜单>li”）使用
$（“#菜单>li”）在不想添加的元素上放置一个类
donthideoncleckelement
，然后单击并隐藏侦听器-

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

在不想添加侦听器的元素上放置一个类
donthideonclecelement
，然后单击并隐藏侦听器，怎么样-

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

在问题中尽量简单，小提琴显示现实生活中的代码。然而，如果（e.target.className！=“title”）
有效，您的解决方案
。在问题中尽量简单，其中Fiddle显示真实的代码。然而，如果（e.target.className！=“title”）
有效，您的解决方案
。它有效，但@bfavaretto提供了侵入性较小的解决方案。不管怎样，谢谢你。它正在工作，但是@bfavareto提供了侵入性较小的解决方案。不管怎样，谢谢。我的解决方案太懒了，对不起：-）我的解决方案太懒了，对不起：-）