我想用 jQuery 选择一个元素。
<ul>
<li><label><input type="checkbox" class="checkbox">checkbox1</label></li>
<ul class="list">
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
<li><label><input type="checkbox" class="checkbox">checkbox2</label></li>
<ul class="list">
<li>lorem</li>
<li>lorem</li>
<li><lorem/li>
</ul>
</ul>
我想用 1 个 jQuery 函数隐藏和显示复选框正下方的列表。
$(".list").hide();
$(".checkbox").click(function() {
if ($(".checkbox").is(":checked"))
{
$("????").show('slow');
}
else
{
$("????").hide('slow');
}
});
这个???需要是一个选择器(仅)选择复选框下的列表。
最佳答案
首先,您的 HTML 无效,因为 ul
中的 li
之间不能有元素。将 HTML 更改为:
<ul>
<li>
<label><input type="checkbox" class="checkbox">checkbox1</label>
<ul class="list">
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
</li>
<li>
<label><input type="checkbox" class="checkbox">checkbox2</label>
<ul class="list">
<li>lorem</li>
<li>lorem</li>
<li><lorem</li>
</ul>
</li>
</ul>
然后你可以使用最近的父li
作为上下文来查找相关的ul
:
$(".list").hide();
$(".checkbox").click(function() {
var $parentLi = $(this).closest("li");
if ($(this).is(":checked")) {
$("ul", $parentLi).show('slow');
}
else {
$("ul", $parentLi).hide('slow');
}
});
关于jquery - 在 jQuery 中使用选择器选择元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10702818/