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应该是彼此的兄弟姐妹，并且代码混淆了。：）

所以，这就是我将如何处理它。。

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 s，它是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最接近的$(this)元素（即<figcaption>）

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

jQuery第一个类型为click的元素

4 个答案: