0

効率的で最小限の jQuery ドロップダウン スクリプトを作成しようとしています。いくつかの ul を li に関連付け、これを each ループで参照する方法が必要です。クリック可能な li タイトルのそれぞれをクラスターと考えてください。その下にある「子」ul もこれの一部です。

each ループを使用して各クリック可能な lis を反復処理し、それに関連付けられているサブリスト uls を展開する効率的なコードを作成したいと考えています。問題は、各ループで参照できるように、これらのサブリスト ul を親 li に関連付ける方法を知る必要があることです。サブリスト uls は実際には li の子ではないため、標準の jquery セレクターは本当に役に立ちません。

HTML と Jquery は以下を試みます。助けてください

<ul>
        <li class='tier1'>This is what I want to click</li>
            <ul (#1)>
                <li>I want this to drop down</li>

            </ul>
                             <ul>
                <li  id="gap">I want these to drop down</li>

            </ul>
       <li class='tier1'>Another clickable title</li>
            <ul>
                <li  id="gap">I dont want this to drop down when I click the li at the top of this markup</li>

            </ul>
</ul>

私の問題は、上のliを​​クリックしたときにslideToggleしたいul（＃1）が、まったく子供ではないことです。

そこで、次のコードを作成しました。

$(document).ready(function(){
    $('.tier1').each(function(){
        $(this).click(function(){
            $(this).children('ul').slideToggle('slow');
        });
    });
});
4

2 に答える 2

1

あなたの主な問題は、提供された HTML に「tier1」クラスが何もないことかもしれません。.each()クリック関数をクラスにアタッチするだけなので、関数も必要ありません。

$('.tier1').click(function(){
    $(this).children('ul').slideToggle('slow');
});

HTML も無効でした。UL を UL にネストすることはできません。修正版:

<ul>
    <li class="tier1">This is what I want to click
        <ul>
            <li>I want this to drop down</li>
        </ul>
        <ul>
            <li  id="gap">I want these to drop down</li>
        </ul>
    </li>
    <li class="tier1">Another clickable title
        <ul>
            <li id="gap">I dont want this to drop down when I click the li at the top of this markup</li>
        </ul>
    </li>
</ul>

また、クリックする前にいくつかの CSS で子を非表示にする必要があります。

ul li ul{
    display: none;
}

このフィドルでの作業デモ。

于 2013-01-28T19:50:22.410 に答える
0

ここで私の例を参照してください: http://jsfiddle.net/D29mQ/2/

マークアップにエラーがあります。Aulは a の直系の子孫にはなれませんが、 a の直系の子孫になることはulできますli。javascript が無効になっている場合にコンテンツが非表示にならないように、li.drawer 内に を追加しましたhide()(これらを css で非表示にすることはお勧めしません)。ul

<ul>
<li>
    <p class='handle'>This is what I want to click</p>
    <ul  class='drawer'>
        <li>
            <p class='handle'>This has a drawer too!</p>
            <ul  class='drawer'>
            <li>I want this to drop down</li>
            </ul>
        </li>
    </ul>
    <ul  class='drawer'>
        <li>I want these to drop down</li>
    </ul>
</li>

<li>
    <p class='handle'>This is what I want to click</p>
    <ul  class='drawer'>
        <li>I want this to drop down</li>
    </ul>
    <ul  class='drawer'>
        <li>I want these to drop down</li>
    </ul>
</li>
</ul>

<div>
    <p class='handle'>Here is an example using a wrapper div and paragraph tags.</p>
    <p  class='drawer'>
        I want this to drop down
    </p>
    <p  class='drawer'>
        I want these to drop down
    </p>
</div>

そしてjquery

$(document).ready(function(){
  $('.drawer').hide();
  $('.handle').click(function(){
        $(this).parent().children().not(this).slideToggle('slow');        
  });
});
于 2013-01-28T19:50:33.323 に答える