jquery - jQuery もっと見る

Question

誰かが私を助けてくれることを願っています。

「もっと見る」リンクで非表示のdivを展開し、「もっと見る」を非表示にしようとしていますが、リスト項目も非表示にする必要があります。これは、同じページの複数のリストに適用する必要があり、アイテムごとに「もっと見る」テキストをカスタマイズできる必要があります。

次のようになります。

<ul>
<li>Item</li>
<li>Item</li>
<li><a class="toggle">Show More...</a></li>
<div class="toggle-wrap">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</ul>

[もっと見る] をクリックすると、次のように表示されます。

<ul>
<li>Item</li>
<li>Item</li>
<li style="display: none;"><a class="toggle">Show More...</a></li>
<div class="toggle-wrap">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</ul>

何か案は？

score 1 · Accepted Answer

toggle-wrapDIVはULの直接の子であるため、HTMLは無効です。これを修正するには、誰かが[もっと見る]をクリックしたときにのみ表示したいすべてのLIにクラスを与えることができます。つまり、次のようなものです。

<ul>
    <li>Item</li>
    <li>Item</li>
    <li><a class="toggle">Show More...</a></li>
    <li class="extra">Item</li> <!-- li's with class extra wont show up by default -->
    <li class="extra">Item</li>
    <li class="extra">Item</li>
</div>
</ul>

HTMLが上記の構造になったら、次のように切り替えることができます。

$('li a.toggle').click(function() {
    $(this).parent('li').hide();
    $(this).parent('li').siblings('extra').show();
});

score 1 · Accepted Answer

HTMLが無効です。<div>要素を使用する代わりに、追加のリストを使用します。
jQuerybind('click')を使用して、子リストを切り替えます。

jsFiddleでデモを見る

score 1 · Accepted Answer

上記のコメントで述べたように、ul の直接の子孫として li 要素以外を持つことを意図していないため、html は無効です。

ここでのアイデアが、ユーザーが「もっと見る...」をクリックするまで長いリストの最後を非表示にすることである場合、html に対して次のようなことができます (基本的には、div を除いたものと同じです)。

<ul>
<li>Item</li>
<li>Item</li>
<li><a class="toggle">Show More...</a></li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

そして、ドキュメントの準備が整ったハンドラーで:

$('li a.toggle').each(function(){
    $(this).parent().nextAll().hide();
}).click(function(){
    $(this).parent().hide()
           .nextAll().show();
});

これは、li 内にある "toggle" クラスのすべてのリンクを検索し、それに続くすべての関連する li 要素を非表示にすることから始まります。

クリックハンドラーは、クリックされたリンクの親 li を取得して非表示にし、次の兄弟 li を取得して表示します。

これは、このデモに示すように、同じページ上の複数のリストに対して自動的に機能します: http://jsfiddle.net/v2pNS/

jquery - jQuery もっと見る

3 に答える 3

Related

Reference