jQuery Collapsable - 切换展开/折叠

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()
}

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

编辑添加sn-p：

我不确定你会如何使用你正在使用的库，但这是我只使用 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>