为什么是不同的结局

Question

构建一个简单的下拉菜单，JS 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

1. 两个犯罪嫌疑人看在选择sub-menu大概应该是.sub-menu（带有前缀.）

2. 在第二个例子中，你使用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)的子项。但在第一个，你给了一个永远不会工作的选择器。