jQuery 可折叠 - 切换展开/折叠

Question

如何检测所有项目何时被手动更改为 aria-expanded="false" 或 aria-expanded="true" 以触发点击功能的更改。目前，点击触发器不够智能，无法知道何时所有项目都具有相同状态以允许下一次点击 expand/collapse 全部。

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

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

需要对现有内容进行最少更改的解决方案可能是在展开或折叠元素时添加额外的检查，这将在所有元素关闭时翻转按钮的状态，或者当所有元素都已打开，expand/collapse 按钮的状态不正确。

您可以在 expanding/collapsing 单个元素的事件处理程序之后添加条件，如下所示：

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

在元素 expanded/collapsed 之后，如果其中一项检查为真，按钮将被自动点击以将其状态恢复到应有的状态。

编辑添加片段：

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

jQuery 可折叠 - 切换展开/折叠

jQuery Collapsable - Toggle expand / collapse

jquery

collapsable