CSS/Javascript 可折叠部分不会关闭

Question

I have collapsible sections that are supposed to open and close when clicked on, however currently they do not close once they have been opened.

See the use case here: Use case

I am using the following code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
$(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

How can I modify this so that it collapses once opened?

Answer 1

The issue here is that you are not applying a conditional on when to set open / closed states. So every click is triggering all of the actions in one go right now (opening and closing at the same time), and because slideDown was the last action, it 'works' on the first click. However, when you want it to close, it will always re-open due to the code calling slideDown at the end. By using an IF statement and separating out the behaviour, the elements will expand / close based on the current classes applied to elements.

The below script is an example of what will work.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
      $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
      $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
      $(".markdown-block .sqs-block-content h3").click(function() {

        if ( $(this).hasClass('ui-open')) {
          $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
          $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
          $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
        } else {
          $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideDown();
          $(".markdown-block .sqs-block-content h3").removeClass('ui-closed');
          $(".markdown-block .sqs-block-content h3").addClass('ui-open');
        }
      });
    });
    </script>