带有多个 div 的 Javascript SlideUp

Question

现在，我只能激活一个过滤器。如果我尝试点击另一个过滤器，它会取消第一个过滤器。我怎样才能让他们都保持活跃？

这是我的代码:

https://jsfiddle.net/0x43v59b/2/

html:

<div class="header-box">
  <div class="header-click">
    <h5>Publish Year</h5>
  </div>
  <div class="no-display">
    <p>test1</p>
  </div>
</div>

<div class="header-box">
  <div class="header-click">
    <h5>Condition</h5>
  </div>
  <div class="no-display">
    <p>test2</p>
  </div>
</div>

<script>
  $('.header-click').on('click', function() {
    $parent_filter = $(this).closest('.header-box');
    $parent_filter.siblings().find('.no-display').slideUp();
    $parent_filter.find('.no-display').slideToggle(500, 'swing');
  });
</script>

CSS:

.header-click {
  cursor: pointer;
}
.no-display {
  display: none;
}
.header-box {
  margin-bottom: 15px;
}

Answer 1

你只需要摆脱这一行: $parent_filter.siblings().find('.no-display').slideUp();

它检查所有类为“.no-display”的 sibling 并将它们向上滑动

<script>
  $('.header-click').on('click', function() {
    $parent_filter = $(this).closest('.header-box');
    //$parent_filter.siblings().find('.no-display').slideUp();
    $parent_filter.find('.no-display').slideToggle(500, 'swing');
  });
</script>