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 は無効です。子s はs 自体<ul>の中にある必要があります。<li>

また、チェックボックスの初期表示/状態に応じて$(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 に答える