Question

我有一个用于隐藏和取消隐藏下拉列表的脚本。我试图使其适用于嵌套列表，但它不起作用。问题是，在单击嵌套下拉列表时，它会切换父级上的.is-hidden类，这会隐藏显示的下拉列表。

以下是一个示例：http://codepen.io/dr-potato/pen/AfIyx

我试图用.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();
  });

});

Answer 1

我在尝试理解您的代码时遇到了一些麻烦，因此我尝试通过简单的重写来简化它。

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

在我的示例中，我检查下一个元素是否具有类.is-hidden。如果它有该类，那么我们想要删除它，从而显示该元素。如果该元素已经全部显示，则会触发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');
      }
    });

});

http://codepen.io/anon/pen/qLIKk

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

$(this).next().addClass('is-hidden');

要

$(this).parent().find('ul').addClass('is-hidden');

Answer 2

在JQuery中，您还可以使用toggleClass函数轻松切换元素是否应该实现类。

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

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

2 个答案: