3

自動的に生成され、次の構造に準拠する必要があるレガシー コードを使用しています。

<div id="TITLE1"></div>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
.... (there can be more divs here, IDs can vary as well) ...
<div id="TITLE2"></div>

私が今やりたいことは次のとおりです。

  • クリックTITLE1可能にする
  • クリックすると、下にあるすべてが非表示になりますDIVs(ネストされておらず、ネストすることもできません)。
  • もう一度クリックするとTITLE1、以前に非表示だったものDIVsが再び表示されます
  • 次までDIVs続くもののみを非表示にする(除外)TITLETITLE

ソリューションは、jQuery またはそのようなフレームワークを使用する場合があります。

4

3 に答える 3

10

試す

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').toggle();
})

デモ:フィドル

TITLE根底にあるロジックは単純です -クリックハンドラーを追加することで、id で始まる div をクリッカブルにします - この属性を行うには、セレクターで始まる属性が使用されます。次に、クリックされた要素と、id で始まる次の要素との間のすべてのdiv を検索します。TITLEこれは、.nextUntil()トラバーサル メソッドを使用して行われます。次に、要素を非表示/表示するために.toggle()が使用されます

于 2013-08-26T10:55:41.107 に答える
2

おそらく次のようなものです：

$(document).ready(function() {
    $("body").on("click", 'div[id^="TITLE"]', function() {
        $(this).nextUntil('div[id^="TITLE"]').slideToggle();
    });
});

デモ: http://jsfiddle.net/cjZzG/

つまりid、テキスト「TITLE」で始まる div がクリックされるたびに、.nextUntil()メソッドを使用して次のそのような div までのすべての要素を選択し、それらの可視性を切り替えます。

于 2013-08-26T10:56:58.093 に答える
0

title1anddiv-#要素を 1 つの div でラップできれば、はるかに簡単になります。次に、 のクリックを検出しtitle1、親を取得して、タイトル div 以外のすべての子を非表示にできます。

このようなもの：

<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
</div>
<div>
<div class="title">Toggle divs</div>
    <div id="div1">Div4</div>
    <div id="div2">Div5</div>
    <div id="div3">Div6</div>
</div>      

$(document).ready(function() {
    $('.title').click(function() {
       $(this).parent().children().not('.title').toggle(1000); 
    });
});

これは、要素を論理的にグループ化するため、私が使用するソリューションです。SEO とコードの読みやすさに優れています。

http://jsfiddle.net/WBH7C/

ただし、HTML を編集できない場合は、次のようなソリューションで十分です。

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').find('div[id^=div-]').toggle();
})
于 2013-08-26T11:02:18.213 に答える