Question

使用JS for Wordpress构建一个简单的下拉菜单

我想知道为什么在

时会得到不同的结果

function intDropDownMobile() {
    $('.menu-item-has-children').click(function () {
        // e.preventDefault();
        var subMenus = $(this).siblings();
        var subMenuItems = $('.menu-mobile .sub-menu');

        $(this).children('.menu-mobile .sub-menu').slideToggle(300);
        if (subMenus.children('.menu-mobile .sub-menu').is(':visible')); {
            subMenus.children('.menu-mobile .sub-menu').hide(300);
        }
    });
}

和这个

// Te submenu
   function intDropDownMobile() {
    $('.menu-item-has-children').click(function () {
        // e.preventDefault();
        var subMenus = $(this).siblings();
        var subMenuItems = $('.menu-mobile .sub-menu');

        $(this).children(subMenuItems).slideToggle(300);
        if (subMenus.children(subMenuItems).is(':visible')); {
            subMenus.children(subMenuItems).hide(300);
        }
    });
}

他们都工作，但在第二个选项中行为不同，折叠所有菜单也是非子菜单项，想知道为什么会发生这种情况，

由于

Answer 1

两个人都认为选择器sub-menu可能应该是.sub-menu（前缀为.）
在第二个示例中，您使用subMenuItems来过滤$(this)的子项，但subMenuItems可能始终不包含任何元素，因为我上面指出的问题。因此，$(this).children(subMenuItems).也不包含任何元素。

- 编辑 -

这是你的第一个例子：

    var subMenuItems = $('.menu-mobile .sub-menu');

    $(this).children('.menu-mobile .sub-menu').slideToggle(300);

我从逻辑上认为，当与children()函数一起使用时，此选择器可以正常工作。因为选择器中有一个空格，所以它的结果跨越两个层次结构（具有类menu-mobile的元素，以及它们各自具有类sub-menu的子元素）。由于结果跨越两个级别，因此关于哪个 - 内部或外部 - 返回为“孩子”的功能是不明确的。所以没有人回来!!!

这是你的第二个例子：

    var subMenuItems = $('.menu-mobile .sub-menu');

    $(this).children(subMenuItems).slideToggle(300);

在此示例中，subMenuItems中的所有元素都将包含类sub-menu。其中一些人可能是$(this)的孩子，并且会返回。

因此，在第二个示例中，您选择了文档中与$('.menu-mobile .sub-menu')匹配的所有元素，并过滤为$(this)的子元素。但是在第一个中，你给了一个永远不会起作用的选择器。

为什么结果不同

1 个答案: