1

アンカーをクリックするときに、3つの別々のdivのコンテンツを表示/非表示にする必要があります。

マークアップは次のようになります： Div 1

<div class="media pull-left">
    <img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
    <img src="img.jpg" />
</div>

Div 2

<div class="media-aside pull-right">
    <h4>heading 4</h4>
    <p>Text...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside pull-right is-hidden">
    <h4>heading 4</h4>
    <p>Paragraph...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>

Div 3

<div class="media-thumb ">
    <img src="thumb.jpg" />
    <p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 2</a></p>
</div>

jQueryは次のようになります。

$('.media-thumb a').click(function(){
    $(this).parent().parent().find('is-hidden').toggle();
    return false;
});

is-hidden基本的に、適用されているdivからクラスを削除して他のクラスに追加し、アンカーをクリックしたときにコンテンツのオンとオフを効果的に切り替えたいと思います。

上記のコードを拡張して、必要なことを行うにはどうすればよいですか？

前もって感謝します..

4

2 に答える 2

0

セレクター：visibleを使用できます。

$('div:visible').addClass('is-hidden')
于 2012-12-30T17:52:32.620 に答える
0

セレクターと同様に、トラバースメソッドが正しくありませis-hiddenん（クラスのドットプレフィックスがありません）

find()要素内を検索しますが、要素自体が必要です

<a>以下では、タグクリックの場合について説明します。is-hiddenクラスを持つ他の要素に関してどのような動作が必要かは明確ではありません。明らかに、それが隠されている場合、あなたは1つをclcikすることはできません

これを試して

$('.media-thumb a').click(function(){
   /* if wanting to remove "is-hidden" from all others*/
    $('.is-hidden').removeClass('is-hidden').show();
   /* hide this one*/
   $(this).closest('.media-thumb').addClass('is-hidden').hide();

    return false;
});

closest()セレクターが見つかるまでツリーを検索します。よりきれいですparent().parent()

于 2012-12-30T17:55:54.967 に答える