如何使用按钮切换嵌套列表
如何使用按钮切换嵌套列表
提问于 2017-05-12 17:47:52
我创建了一个带有嵌套的列表，并向每个父<li>元素添加了一个按钮。清单如下：
$("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat13' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat13' class='buttons-filter'>expnd3</button>");
$(document).ready(function() {
$("button").click(function() {
$('li > ul').toggle();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
<li>1</li>
<li class="parent" id="pr1">2
<ul class="children">
<li>2.1</li>
</ul>
</li>
<li>3</li>
<li class="parent" id="pr2">4
<ul class="children">
<li>4.1</li>
<li class="parent" id="pr3">4.2
<ul class="children">
<li>4.2.1</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
但是这一个切换所有列表，而不是只切换单独的嵌套列表？如何只显示/隐藏单独的嵌套列表，单击按钮？提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-12 17:57:10
至于主要问题--而不是每个li > ul元素，您必须只toggle位于button前面的ul元素。所以你应该使用.prev()
$("button").click(function() {
$(this).prev().toggle();
});
$("#pr1").append("<button id='bnt-cat131' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat132' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat133' class='buttons-filter'>expnd3</button>");
$(document).ready(function() {
$("button").click(function() {
$(this).prev().toggle();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
<li>1</li>
<li class="parent" id="pr1">2
<ul class="children">
<li>2.1</li>
</ul>
</li>
<li>3</li>
<li class="parent" id="pr2">4
<ul class="children">
<li>4.1</li>
<li class="parent" id="pr3">4.2
<ul class="children">
<li>4.2.1</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
您的代码还有另一个应该修复的问题--每个按钮都具有相同的id属性(bnt-cat13)。
global attribute defines a unique identifier (ID) which must be unique in the whole document.
Stack Overflow用户
发布于 2017-05-12 17:56:46
将您的功能更改为：
(document).ready(function() {
$("button").click(function() {
$(this).parent().children('ul').toggle();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43943702
复制相关文章
相似问题
腾讯云开发者
