jQuery可挖-伸缩/塌陷

Question

如何检测所有项何时已手动更改为aria-expanded="false"或aria-expanded="true"，以触发单击函数中的更改。目前，单击触发器还不够聪明，无法知道何时所有项都具有相同的状态，从而允许下一次单击展开/折叠所有项。

如果手动折叠所有项目，然后尝试切换按钮，则必须单击它两次才能重置状态。我希望通过检测所有项目都已手动更改为同一状态来自动完成此操作。

​

$(function() {
  $(".collapsable-basic").collapsable({
    accordion: false,
    fx: "toggle",
    collapsableAll: true
  });

  $(".collapsable-basic").collapsable("expandAll");
  jQuery.fn.clickToggle = function(a, b) {
    return this.on("click", function(evt) {
      [b, a][(this.$_io ^= 1)].call(this, evt);
    });
  };
  $(".btn-primary").clickToggle(
    function(evt) {
      evt.preventDefault();
      $(this).text("expand");
      $(".collapsable-basic").collapsable("collapseAll");
    },
    function(evt) {
      $(this).text("collapse");
      $(".collapsable-basic").collapsable("expandAll");
    }
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.statically.io/gist/moofawsaw/696afac8210ff49f0224e2e6fecb4f0f/raw/cd8c6aec13b9453d9bf2952c242bdfd61980f134/pairpal-collapsable.js"></script>

<button class="btn btn-primary expand-all">collapse</button>

<div class="collapsable collapsable-basic">
  <h4 class="ca-control">
    Box 1
  </h4>
  <div class="ca-box">
    <p>
      Aliquam
    </p>
  </div>
</div>

<div class="collapsable collapsable-basic">
  <h4 class="ca-control">
    Box 2
  </h4>
  <div class="ca-box">
    <p>
      Fusce nibh magna.
    </p>
  </div>
</div>

<div class="collapsable collapsable-basic">
  <h4 class="ca-control">
    Box 3
  </h4>
  <div class="ca-box">
    <p>
      Quisque lobortis\.
    </p>
  </div>
</div>

​

Answer 1

对您已经拥有的内容所需要的更改最少的解决方案可能是在元素展开或折叠时添加额外的检查，该检查将在所有元素关闭或打开所有元素以及展开/折叠按钮处于不正确状态时翻转按钮的状态。

可以在事件处理程序之后添加条件，用于展开/折叠单个元素，如下所示：

//If everything is visible
if($(".ca-box:visible").length == $(".ca-box").length && $(".btn-primary").text() == "expand"){
    $(".btn-primary").click()
}
//Else if everything is invisible
else if($(".ca-box:hidden").length == $(".ca-box").length  && $(".btn-primary").text() == "collapse"){
    $(".btn-primary").click()
}

在展开/折叠元素之后，如果其中一个检查为真，则按钮将被自动单击，以将其状态恢复到应有的状态。

编辑添加片段：

我不确定您将如何使用您正在使用的库来完成它，但这就是我将如何仅使用jquery：

​

$('.ca-control').click(function(){
   $(this).next().toggle()
   
  //If everything is visible
  if($(".ca-box:visible").length == $(".ca-box").length){
   $('#toggleAll').text("collapse");
  }
  //Else if everything is invisible
  else if($(".ca-box:hidden").length == $(".ca-box").length){
       $('#toggleAll').text("expand");
  }
});

$('#toggleAll').click(function(){
   if($(this).text()=='collapse'){
      $('.ca-box').hide();
      $(this).text('expand');
   }else{
      $('.ca-box').show();
      $(this).text('collapse');
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.statically.io/gist/moofawsaw/696afac8210ff49f0224e2e6fecb4f0f/raw/cd8c6aec13b9453d9bf2952c242bdfd61980f134/pairpal-collapsable.js"></script>

<button id="toggleAll" class="btn btn-primary expand-all">collapse</button>

<div class="collapsable collapsable-basic">
  <h4 class="ca-control">
    Box 1
  </h4>
  <div class="ca-box">
    <p>
      Aliquam
    </p>
  </div>
</div>

<div class="collapsable collapsable-basic">
  <h4 class="ca-control">
    Box 2
  </h4>
  <div class="ca-box">
    <p>
      Fusce nibh magna.
    </p>
  </div>
</div>

<div class="collapsable collapsable-basic">
  <h4 class="ca-control">
    Box 3
  </h4>
  <div class="ca-box">
    <p>
      Quisque lobortis\.
    </p>
  </div>
</div>

​