javascript - slideup 一旦点击 slidedown div

Question

我已经使用 jquery 完成了 slideup 和 slidedown div。这里我有三个框。一旦我们点击头部，内容就会打开。然后单击另一个头，该内容将打开并关闭旧内容。但我继续关闭相同的内容。所有时间任何一个内容都是开放的。我需要一旦我们点击头部，内容就需要关闭。

$(document).ready(function() {
  $("p").click(function() {
    $this = $(this);
    var parent = $this.closest('.acc');
    $("p").removeClass('open');
    $this.addClass('open');
    $('.acc-body').slideUp();
    parent.find('.acc-body').slideDown();
  });
});

body {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.acc {
  padding: 0px;
  margin: 0;
}

.acc-head {
  padding: 15px;
  margin: 0;
  background: #ccc;
}

.acc-head.open {
  background: #000;
  color: #fff;
}

.acc-body {
  border: 1px solid #ccc;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px;">
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
</div>

Answer 1

要解决此问题，请在 .acc-body 上使用 slideToggle()，并使用 not() 将其从 中排除滑动向上()。同样的模式适用于在 p 元素上添加和删除 open 类。

$(document).ready(function() {
  $("p").click(function() {
    var $this = $(this);
    var $target = $this.next();
    
    $("p").not($this).removeClass('open');
    $this.toggleClass('open');
    
    $('.acc-body').not($target).slideUp();
    $target.slideToggle();
  });
});

body {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.acc {
  padding: 0px;
  margin: 0;
}

.acc-head {
  padding: 15px;
  margin: 0;
  background: #ccc;
}

.acc-head.open {
  background: #000;
  color: #fff;
}

.acc-body {
  border: 1px solid #ccc;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px;">
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
</div>