javascript - 侧边栏 - 关闭和打开过滤器列表

Question

我正在为我的网站构建一个过滤器侧边栏，我希望能够通过按 btn 打开和关闭过滤器列表。

jQuery('.parent > .children').parent().click(function() {
  jQuery(this).children('.children').slideToggle(200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <span>+</span>
  <ul class="children">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<div class="parent">
  <span>+</span>
  <ul class="children">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<div class="parent">
  <span>+</span>
  <ul class="children">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

我的问题是，当我按下它关闭的列表时，我希望它保持打开状态。

Answer 1

你应该给你的按钮类并且只针对这个类:

$('.toggler').click(function() {
  $(this).siblings('.children').slideToggle(200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <span class="toggler">+</span>
  <ul class="children">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<div class="parent">
  <span class="toggler">+</span>
  <ul class="children">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<div class="parent">
  <span class="toggler">+</span>
  <ul class="children">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>