爲什麼是不同的結局

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)的子項。但在第一個，你給了一個永遠不會工作的選擇器。