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

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>

Answer 2

您需要检查实际li上是否没有发生单击。

如果单击直接在li元素上，则使用event.target不执行任何操作，因此将其添加到单击处理程序应该可以执行此操作：

if ($(e.target).is('li')) return;

jQuery('.parent > .children').parent().click(function(e) {
if ($(e.target).is('li')) return;
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>