1

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

这 ？？？？需要是一个选择器，即（仅）选择复选框下的列表。

4

4 回答 4

6

首先，您的 HTML 无效，因为您不能li在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>

然后您可以使用最近的父级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');
    }
});
于 2012-05-22T13:21:28.020 回答
2

快速回答：

$(".checkbox").click(function() {

    if ($(".checkbox").is(":checked"))
    {
        $(this).next('ul').show('slow');
    }
    else
    { 
        $(this).next('ul').hide('slow');
    }
});

但是正如所指出的，您的 HTML 无效，子<ul>s 应该在<li>s 内部。

此外，根据复选框的初始可见性/状态，您可以通过使用$(this).next('ul').toggle('slow');而不是选中复选框的选中状态来缩短代码。

于 2012-05-22T13:21:53.320 回答
1

http://jsfiddle.net/Y7WDJ/你想要的一个简单版本。它选择下一个.list元素并在单击复选框时切换它。

于 2012-05-22T13:29:49.100 回答
0

你可以很容易地遍历你的结构

$(this).parents('li').children('.list').show('slow');

如果您阅读有关选择器和遍历的 jquery 文档，可能会有更简洁的方法

于 2012-05-22T13:21:13.870 回答