Javascript JQuery使用复选框切换嵌套元素
Javascript JQuery使用复选框切换嵌套元素
提问于 2018-09-24 04:39:53
我目前在访问我的list子类时遇到了问题。这个想法是用复选框作为按钮来创建多级展开列表。现在，它可以同时折叠/展开，我们希望通过选中/取消选中元素的父元素来展开元素。
我确实意识到我可以使用less/sass通过单击它们来隐藏/显示这些元素，但我想学习如何使用jQuery来做到这一点。
$(document).ready(() => {
$('.sub-ul').hide();
$('.side-checkbox').each(function () {
var obj = $('.sub-ul');
$(this).click(function () {
if ($(this).is(':checked')) {
obj.show(300);
} else {
obj.hide(200);
}
});
});
});a {
text-decoration: none;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-nav">
<li class="li-nav">
<a class="side-menu-checkbox" href="#">(A)Lorem</a>
<input type="checkbox" name="a" id="a" class="side-checkbox">
<ul class="ul-nav sub-ul">
<li class="li-nav">
<a href="#">(B)Ipsum</a>
<input type="checkbox" name="a" id="b" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
<li>
<a href="#" class="side-menu-plus">(B)Ipsum</a>
<input type="checkbox" name="a" id="c" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
</ul>
</li>
<li class="li-nav"><a href="#">(A)Lorem</a></li>
<li class="li-nav">
<a class="side-menu-checkbox" href="#">(A)Lorem</a>
<input type="checkbox" name="a" id="a" class="side-checkbox">
<ul class="ul-nav sub-ul">
<li class="li-nav">
<a href="#">(B)Ipsum</a>
<input type="checkbox" name="a" id="b" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
<li>
<a href="#" class="side-menu-plus">(B)Ipsum</a>
<input type="checkbox" name="a" id="c" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
</ul>
</li>
<li class="li-nav"><a href="#">(A)Lorem</a></li>
</ul>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-24 05:02:11
如果我没理解错你的问题，那么答案是简单的调整
var obj = $('+ .sub-ul', this); // Old code $('sub-ul');这是一种快捷的方法，可以根据已单击的相邻复选框在您的继承表中选择要切换显示的正确sub-ul列表实例。
实际上，这个变化所做的是这样说的：
对于单击的当前
.side-checkbox(即this)，请选择紧跟在此.side-checkbox后面的.sub-ul同级
这是一个可以工作的代码片段-希望这能有所帮助！
$(document).ready(() => {
$('.sub-ul').hide();
$('.side-checkbox').each(function () {
/* UPDATE: Here is the line that you need to update */
var obj = $('+ .sub-ul', this);
$(this).click(function () {
if ($(this).is(':checked')) {
obj.show(300);
} else {
obj.hide(200);
}
});
});
});a {
text-decoration: none;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-nav">
<li class="li-nav">
<a class="side-menu-checkbox" href="#">(A)Lorem</a>
<input type="checkbox" name="a" id="a" class="side-checkbox">
<ul class="ul-nav sub-ul">
<li class="li-nav">
<a href="#">(B)Ipsum</a>
<input type="checkbox" name="a" id="b" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
<li>
<a href="#" class="side-menu-plus">(B)Ipsum</a>
<input type="checkbox" name="a" id="c" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
</ul>
</li>
<li class="li-nav"><a href="#">(A)Lorem</a></li>
<li class="li-nav">
<a class="side-menu-checkbox" href="#">(A)Lorem</a>
<input type="checkbox" name="a" id="a" class="side-checkbox">
<ul class="ul-nav sub-ul">
<li class="li-nav">
<a href="#">(B)Ipsum</a>
<input type="checkbox" name="a" id="b" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
<li>
<a href="#" class="side-menu-plus">(B)Ipsum</a>
<input type="checkbox" name="a" id="c" class="side-checkbox">
<ul class="ul-list sub-ul">
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
<li class="li-nav"><a href="#">(C)Dolorem</a></li>
</ul>
</li>
</ul>
</li>
<li class="li-nav"><a href="#">(A)Lorem</a></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52470074
复制相关文章
相似问题