javascript - CSS/Javascript 可折叠部分不关闭

Question

我有可折叠的部分，单击时应该打开和关闭，但是目前它们一旦打开就不会关闭。

在此处查看用例：用例

我正在使用以下代码：

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

我怎样才能修改它，以便它在打开后折叠？

标签： javascripthtmlcss

Answer 1

这里的问题是您没有对何时设置打开/关闭状态应用条件。因此，每次单击都会立即触发所有操作（同时打开和关闭），并且由于 slideDown 是最后一个操作，因此它在第一次单击时“起作用”。但是，当您希望它关闭时，由于最后调用 slideDown 的代码，它总是会重新打开。通过使用 IF 语句并分离行为，元素将根据应用于元素的当前类展开/关闭。

下面的脚本是一个可行的例子。

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