Question

我似乎无法理解这一点，我有以下代码（有点乱，从javascript开始），我一直在努力，我使用切换菜单工作，它的工作原理完全适合first li drop down，但对于其他三个，它不是，我想知道如何解决这个问题？

有4个下拉列表适用于.click，only the first one激活 AddClass ..

    $(document).ready(function(){
    $(".mobileFirst").click(function(e) {
        $(".mobile-menu > .menu-container > ul").toggle();
    });

    $(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").click(function(e)
    {
        $(".mobile-menu > .menu-container > ul > li:nth-of-type(3) .menu-sub").toggle(function(){
            if ($('.menu-sub').css("display") == "block")
            {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").addClass("li-bottom-fix");
            } else {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").removeClass("li-bottom-fix");
            }
        });
    });

    $(".mobile-menu > .menu-container > ul > li:nth-of-type(4)").click(function(e)
    {
        $(".mobile-menu > .menu-container > ul > li:nth-of-type(4) .menu-sub").toggle(function(){
            if ($('.menu-sub').css("display") == "block")
            {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(4)").addClass("li-bottom-fix");
            } else {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(4)").removeClass("li-bottom-fix");
            }
        });
    });

    $(".mobile-menu > .menu-container > ul > li:nth-of-type(6)").click(function(e)
    {
        $(".mobile-menu > .menu-container > ul > li:nth-of-type(6) .menu-sub").toggle(function(){
            if ($('.menu-sub').css("display") == "block")
            {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(6)").addClass("li-bottom-fix");
            } else {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(6)").removeClass("li-bottom-fix");
            }
        });
    });
    $(".mobile-menu > .menu-container > ul > li:nth-of-type(7)").click(function(e)
    {
        $(".mobile-menu > .menu-container > ul > li:nth-of-type(7) .menu-sub").toggle(function(){
            if ($('.menu-sub').css("display") == "block")
            {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(7)").addClass("li-bottom-fix");
            } else {
                $(".mobile-menu > .menu-container > ul > li:nth-of-type(7)").removeClass("li-bottom-fix");
            }
        });
    });
});

我还没有包含任何HTML，因为正如我所说的，它明确地将 li-bottom-fix 添加到第一个按钮，但对于其他三个按钮，它并没有。

Answer 1

$('.menu-sub').css("display") == "block"

将始终比较文档中第一个 display元素的.menu-sub CSS样式。来自.css documentation：

获取匹配元素集[...]
中第一个元素的计算样式属性的值

如果您想引用您致电toggle的元素，请使用this：

$(this).css("display") == "block"

来自.toggle documentation：

如果提供，则动画完成后将触发回调。这对于按顺序将不同的动画串联在一起非常有用。回调不会发送任何参数，但this设置为动画的DOM元素。

而不是重复选择器而不是处理程序，只需保持对单击元素的引用：

$(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").click(function(e) {
    var $clickedElement = $(this);
    $clickedElement.find(".menu-sub").toggle(function() {
        $clickedElement.toggleClass(
          "li-bottom-fix", 
          $(this).css("display") === "block"
        );
    });
});

如果可以，您应该将所有这些元素放在同一个类中，这样您就不必重复逻辑。至少命名事件处理程序并重用它（现在它被推广）。

单击列表后为什么不包含AddClass？

1 个答案: