jQuery Сворачиваемый - Включить / развернуть / свернуть - PullRequest
Новая
       41

jQuery Сворачиваемый - Включить / развернуть / свернуть

0 голосов
/ 06 мая 2020

Как определить, когда все элементы были вручную изменены на 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>

1 Ответ

1 голос
/ 07 мая 2020

Решением, которое потребует наименьшего количества изменений того, что у вас уже есть, вероятно, будет добавление дополнительной проверки, когда элемент развернут или свернут, которая изменит состояние вашей кнопки, когда все элементы закрыты или когда все элементы открыты, и кнопка развертывания / свертывания имеет неправильное состояние.

Вы можете добавить условие после обработчика события для развертывания / свертывания отдельного элемента следующим образом: 

//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>
...