在jQuery中选择带有选择器的元素

Question

我想用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');
    }
});

???? 需要是一个选择器(仅)选择复选框下的列表.

Answer 1

首先,您的HTML无效,因为您不能li在a 之间添加元素ul.将您的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>

然后,您可以使用cloest parent 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');
    }
});