javascript - jQuery类型的第一个元素单击

我正在解决一个问题，其中有一个菜单级别很深。我正在尝试获取它，以便如果单击一级元素（添加类.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>

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

最佳答案

因此，您的示例HTML不是我期望看到的。 。 。具体来说，您的第二个<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')作为更改事件的选择器时。那就是“任何span元素的后代”。因此，除了直接在ubermenu-item-level-0列表项下面的跨度之外，它也在拾取ubermenu-item-level-0和ubermenu-item-level-1元素下的跨度，因为它们也是后代。

因此，我将选择器更改为ubermenu-item-level-2，它转换为“所有$firstLevelMenuOptions.children("a").children("span")，它们是span的直接子代，也就是a元素的直接子代”（注意：已设置ubermenu-item-level-0通过代码前面的逻辑等于$firstLevelMenuOptions）。这将阻止选择器选择较低级别的$(".ubermenu").find(".ubermenu-active");。

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


从所有ubermenu-active元素中删除ubermenu-active
将ubermenu-item-level-0添加到与单击的ubermenu-active最接近的ubermenu-item-level-0元素（即span）


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