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

Question

这是一个棘手的问题！我花了几个小时在这个，在Stackoverflow找不到类似的东西，可能是因为我不知道要搜索什么。

问题：

1. 在容器中，我有3个箱子，每个具有开/关切换按钮 - 即单独切换它们 - 它工作正常。

2. 我有一个打开关闭所有按钮的容器外，应该能够打开剩余的盒子(if 1 or 2 are already open)或者如果所有/或没有打开，它应该打开/关闭它们全部。

我的代码几乎不，我需要(if 1 or 2 boxes are open and you click Open-Close All, the remainder opens)，如果所有的箱子都关闭，开闭打开它们一下子一切。

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

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

我认为你的解决方案非常简单。基本上你必须做的是检查你显示的项目数量，当用户点击de框出主站按钮时。看看下面的内容：

//打开/关闭所有框 $（'。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 
} 

}）;

此外，我建议您封装代码：

$(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 2

您可以使用类名作为参数和条件.toggleClass()功能检查可见元素的长度：

$('.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 3

我猜你正在寻找:hidden选择：

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

Answer 4

完全可行的解决方案：（复制&粘贴&检查）

在自己的代码需要非常小的变化， 正确的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