jQuery类型的第一个元素单击

Question

我正在解决一个问题，其中有一个菜单级别很深。 我正在尝试获取它，以便如果单击第一级元素（添加类.ubermenu-active ），它将寻找该类的任何其他第一级元素并将其删除。

$('.ubermenu-item-level-0 span').on('click',function() {
    var target = $('.ubermenu-item-level-0');
    $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active');
    target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active');
});

HTML（模拟）：

<ul class="ubermenu">
    <li class="ubermenu-item-level-0">
        <a class="ubermenu-target">
            <span class="ubermenu-target-title">Level 1</span>
        </a>
        <ul class="ubermenu-submenu">
            <li class="ubermenu-item-level-1">
                <a class="ubermenu-target">
                    <span class="ubermenu-target-title">Level 2</span>
                </a>
            </li>
            <li class="ubermenu-item-level-1">
                <a class="ubermenu-target">
                    <span class="ubermenu-target-title">Level 2</span>
                </a>
                <ul class="ubermenu-submenu">
                    <li class="ubermenu-item-level-2">
                        <a class="ubermenu-target">
                            <span class="ubermenu-target-title">Level 3</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <li class="ubermenu-item-level-0">
            <a class="ubermenu-target">
                <span class="ubermenu-target-title">Level 1</span>
            </a>
        </li>
    </li>
</ul>

现在，如果单击任何子元素，父级将关闭

Answer 1

当前，您的target var正在选择类.ubermenu-item-level-0所有元素，因此，当您切换类时，您将切换所有父元素。 您的目标var应该是与所单击元素有关的东西，例如var target = $(this).closest('.ubermenu-item-level-0');

Answer 2

您可以停止事件传播：

event.stopPropagation()

Answer 3

在没有看到完整的HTML的情况下，我建议尝试这样做：

$('.ubermenu-item-level-0 span').on('click',function(e) {
       e.stopPropagation();
       var target = $('.ubermenu-item-level-0');
       $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active');
       target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active');
    });

Answer 4

因此，您的示例HTML不是我期望看到的。 。 。 具体来说，您的第二个<li class="ubermenu-item-level-0" . . . <li class="ubermenu-item-level-0" . . . 元素当前在第一个元素下显示为儿童，而您的描述听起来像他们应该是兄弟姐妹。

为了解决这个问题，我将假定这两个li是彼此的兄弟，并且代码以某种方式混淆了。 :)

所以，这就是我的处理方式。 。 。

var sFirstLevelMenuClass = ".ubermenu-item-level-0";
var sActiveMenuClass = "ubermenu-active";
var $firstLevelMenuOptions = $(".ubermenu").find(sFirstLevelMenuClass);

$firstLevelMenuOptions.children("a").children("span").on("click", function() {
    $firstLevelMenuOptions.removeClass(sActiveMenuClass);
    $(this).closest(sFirstLevelMenuClass).addClass(sActiveMenuClass);
});

基本上，我简化了您的逻辑并修复了jQuery代码中的一个小问题。

---

详细说明

问题是，当您使用$('.ubermenu-item-level-0 span')作为更改事件的选择器时。 那就是“任何作为ubermenu-item-level-0元素的后代的span元素”。 因此，除了直接在ubermenu-item-level-0列表项下的跨度之外，它还选择了ubermenu-item-level-1和ubermenu-item-level-2元素下的ubermenu-item-level-1 ，因为它们也是后代。

因此，我将选择器更改为$firstLevelMenuOptions.children("a").children("span") ，它转换为“所有span ，即a的直接子代，即ubermenu-item-level-0的直接ubermenu-item-level-0 element”（ 注意： $firstLevelMenuOptions设置为等于$(".ubermenu").find(".ubermenu-active");通过代码前面的逻辑 ）。 这将阻止选择器拾取较低的水平spans 。

除此之外，还精简了一些选择器以提高效率，我唯一改变的另一件事是如何操作ubermenu-active类。 在我的解决方案中，有两个步骤：

1. 从所有 ubermenu-item-level-0元素中删除ubermenu-active
2. 将ubermenu-active添加到与所单击span最接近的ubermenu-item-level-0元素（即$(this) ）。

这基本上是重置列表，然后重新选择适当的菜单项激活我。