Question

现在，我只能激活一个过滤器。如果我尝试单击其他过滤器，它会取消第一个过滤器。如何让它们保持活跃？

这是我的代码：

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();

它用班级检查所有兄弟姐妹＆＃39; .no-display＆＃39;并将它们向上滑动

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

Answer 2

  $('.header-click').on('click', function() {
   $(this).parent().find('.no-display').slideToggle(500,'swing');    
  });

Answer 3

这是更新的jquery函数：

$('.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');
  });

Answer 4

您可以使用此代码，适合您的情况：

＆＃13;

  $('.header-click').on('click', function() {
    $parent_filter = $(this).next('.no-display');
    if ($parent_filter.is(":hidden")) {
        $parent_filter.slideDown();
    } else {
        $parent_filter.slideUp();
    }
  });

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Year Filter -->
<div class="header-box">
  <div class="header-click">
    <h5>Publish Year</h5>
  </div>
  <div class="no-display">
    <p>test1</p>
  </div>
</div>
<!-- Condition Filter -->
<div class="header-box">
  <div class="header-click">
    <h5>Condition</h5>
  </div>
  <div class="no-display">
    <p>test3</p>
  </div>
</div>

＆＃13;

Answer 5

以上所有答案对我来说都是正确的，还有一种方法可以达到这个目的。

$('.header-click').on('click', function() {
      $(this).next(".no-display").slideToggle(500, 'swing');
  });

Answer 6

这是我制作的剧本，希望这是你想要的。

   <script>
    $(document).ready(function(){
     $(document).on('click','.header-click',function(){

       $(this).next().slideToggle(500,'swing');

      });
    });
  </script>

带有多个div的Javascript SlideUp

6 个答案: