Jquery 为什么这个嵌套的下拉列表脚本不起作用？

我有一个隐藏和取消隐藏下拉列表的脚本。我曾试图使它与嵌套列表一起工作，但它不起作用。问题在于，单击嵌套下拉列表时，会切换父级上的.is隐藏类，从而隐藏出现的下拉列表

以下是一个例子：

我已尝试使用

.not（$（this）.parent（）.addBack（））

阻止隐藏父级，但显然它不起作用

$(document).ready(function() {

  // When a dropdown trigger is clicked
  $('.Navigation-link--dropdownTrigger').click(function(e) {
    // If the selected dropdown list is not visible
    if( $(this).siblings('.Navigation-list--dropdown').hasClass('is-hidden') ){
      // Hide all dropdown lists, except the selected dropdown and its parents
      $(".Navigation-list--dropdown")
        .not($(this).parent().addBack())
        .addClass('is-hidden');
      // Make the selected dropdown visible
      $(this).siblings('.Navigation-list--dropdown')
        .removeClass('is-hidden'); 
    // If the selected dropdown is visible, hide it and its descendants
    } else {
      $(".Navigation-list--dropdown").addClass('is-hidden');
    }
  }).children('a.Navigation-link--dropdownTrigger').click(function(e){e.preventDefault();});
  // Stop clicks on navigation links from bubbling up
  $('.Navigation-link').click(function(e) {
    e.stopPropagation();
  });

});

---

我在试图理解你的代码时遇到了一些困难，所以我试图通过简单的重写来简化它

我相信这是你追求的基本功能，对吗

在我的示例中，我正在检查下一个元素是否具有类

。是否隐藏。如果它有那个类，那么我们希望删除它，从而显示元素。如果显示元素已准备就绪，则会触发
else
语句，因为类已不存在。此语句再次隐藏该元素

$(document).ready(function() {  

    $('.Navigation-link--dropdownTrigger').click(function(){
      if($(this).next().hasClass('is-hidden')){
        $(this).next().removeClass('is-hidden');
      }
      else{
        $(this).next().addClass('is-hidden');
      }
    });

});


如果您也想隐藏所有子项，请更改：

$（this.next（）.addClass（'is-hidden'）

到

$（this.parent（）.find（'ul'）.addClass（'is-hidden'）
在JQuery中，您还可以使用toggleClass函数轻松切换元素是否应该实现类

 $('.Navigation-link--dropdownTrigger').click(function(e) {    
    var children = $(this).siblings('.Navigation-list--dropdown');
    children.toggleClass('is-hidden');  
  })

您的示例只显示了一个主下拉列表，但代码中的注释提到隐藏所有下拉列表。最终目标正是这样吗？单击其他列表后，所有其他列表都会立即折叠？