Question

这个很棘手！我花了好几个小时在这上面，在Stackoverflow上找不到类似的东西，可能是因为我不确定要搜索什么。

问题：

在一个容器中，我有3个盒子，每个盒子都有一个打开/关闭切换按钮 - 单独切换它们 - 它工作正常。
我在容器外面有一个打开 - 关闭所有按钮，应该能够打开剩余的框(if 1 or 2 are already open)或者如果所有/或没有打开，它应该打开/关闭它们。

我的代码几乎完成了我需要的所有内容(if 1 or 2 boxes are open and you click Open-Close All, the remainder opens)，如果所有框都关闭，Open-Close会立即打开它们。

唯一不起作用的是，如果所有方框都已打开，我希望能够通过点击全部打开全部关闭它们。

http://codepen.io/StrengthandFreedom/pen/ZbrvOO

$('.small-box-button').on('click', function(){
  event.preventDefault();
  $(this).next('.small-box').toggleClass('is-visible');

});

// Open / Close all / remainders
$('.open-close-all-button').on('click', function(){
  event.preventDefault();

  if ($('.small-box').is(':visible')) {
 // then open the small boxes that are not open yet (the remainders) 
      $('.small-box').siblings().addClass('is-visible');
   //  $(this).next('.small-box').toggleClass('is-visible');
}
  //not sure what to do here... 
 else ($('.small-box').not(':visible')) 
       $('.small-box').siblings().addClass('is-visible');
});

我想我需要使用更多if else条件并检查值(like if isVisible >= 1 || 2 )但不知道如何编写它。我觉得这可以写得更简单。

非常感谢一些指导，我尽力让这个例子尽可能容易看。

谢谢！： - ）

Answer 1

您可以将.toggleClass()函数与classname一起用作检查可见元素长度的参数和条件：

$('.open-close-all-button').on('click', function(){
 event.preventDefault();
 $('.small-box').siblings().toggleClass('is-visible',$('.small-box').length != $('.small-box.is-visible').length);
});

<强> Working Demo

Answer 2

我认为您的解决方案非常简单。基本上你要做的就是检查用户点击主要按钮输出网站时显示的项目数量。看看下面：

//打开/关闭所有框 $（＆＃39; .open-close-all-button＆＃39;）。on（＆＃39; click＆＃39;，function（）{ event.preventDefault（）;

var numOfItems = $('.is-visible').length;

if(numOfItems > 1){ //Add the case you need
  //Remove all the .is-visible
}else{
  //Add to all the boxes .is-visible 
}

}）;

我还建议您封装代码：

$(document).ready(function(){
  // Toggle individual boxes when clicking on buttons inside container
  $('.small-box-button').on('click', function(){
    event.preventDefault();
    $(this).next('.small-box').toggleClass('is-visible');

  });
  // Open/close all boxes 
  $('.open-close-all-button').on('click', function(){
    event.preventDefault();

    var numOfItems = $('.is-visible').length;

    if(numOfItems > 1){ //Add the case you need
      //Remove all the .is-visible
    }else{
      //Add to all the boxes .is-visible 
    }
  });
});

Answer 3

完整的解决方案:(复制和粘贴＆检查）

您自己的代码需要进行非常小的更改，正确的Javascript代码就是这样

$(document).ready(function(){
    // Toggle individual boxes when clicking on buttons inside container
    $('.small-box-button').on('click', function(e){
      $(this).next('.small-box').toggleClass('is-visible');
    });

    // Open/close all boxes
    $('.open-close-all-button').on('click', function(e){
        if($(".small-box.is-visible").length < $(".small-box").length){
            $(".small-box:not([class*='is-visible'])").addClass("is-visible");
        }else{
            $(".small-box").removeClass("is-visible");
        }
    });
});

此外，我已更新您的示例链接，它工作正常，看看下面的链接并测试它是否满足您的需要：）

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

Answer 4

我猜您正在寻找:hidden选择器：

$('.open-close-all-button').on('click', function(){
  event.preventDefault();
  $('.small-box:hidden').addClass('is-visible');
});

如果打开/关闭一个或两个方框，打开/关闭剩余部分（如果全部打开，全部关闭）

4 个答案: