9

私はcssを使用して、人がリンクをクリックしたときに表示したいコンテンツを非表示にしています。ページには複数のインスタンスがあります。

例を設定しましたが、現在、いずれかのリンクをクリックすると、すべてのコンテンツが表示されます。

http://jsfiddle.net/paulyabsley/rHD43/

ありがとう

4

4 に答える 4

7

リンクの親要素の兄弟である.siblings()クラスを持つ要素を検索するために使用します。details

$('.item h3 a').click(function () {
    $(this).parent().siblings(".details").toggleClass("display");
});​

デモ

于 2012-07-01T22:35:05.413 に答える
2

代わりにこれを試してください：

$('.item h3 a').click(function () {
    $(this).parent().next().toggleClass("display");
});​

ここでデモ。

現在のセレクターが行っているのは、一致するすべての要素を選択することです。上記のスニペットは、クリックされた要素に関連する要素を選択します。$(this)この場合は、クリックされた要素を使用<a>します。

は、の<a>内部にあり<h3>、<div>はの兄弟であり、<h3>ではないため<a>、を使用$.parent()してを選択し<h3>、を使用して、を切り替えたい$.next()次の要素を取得する必要があります。<h3><div>

これを行うためのより良い方法は、<h3>代わりにクリックハンドラーをバインドすることです。<a>これにより、セレクターチェーンが簡素化されるだけでなく、タグで発生する可能性のある問題がすべて削除されます。これはうまくいくでしょう、IMO：

$('.item h3').click(function () {
    $(this).next().toggleClass("display");
});​
于 2012-07-01T22:38:17.520 に答える
2

ルート要素に移動して、詳細を検索できます。

$(this).parent().parent().find('.details').toggleClass("display");
于 2012-07-01T22:40:47.270 に答える
0

もう少し手の込んだ解決策ですが、現在の回答に欠けていると思われる新しい説明を開いたときに、他の説明を閉じる機能を提供します。

$('.item h3 a').click(function () {
    // always try cache your selectors if you plan on using them repeatedly.
    var $details = $(this).parent().next("div.details");

    if ($details.hasClass('display')){
        // if the item we clicked on is already displayed - we want to hide it.
        $details.toggleClass("display");
    }else{
      // now we want to close all other open descriptions      
      $("div.details").removeClass("display");
      // and only display the one we clicked on.
      $details.toggleClass("display",true);    
    }
});​

実例

アニメーションの例

于 2012-07-01T22:37:55.507 に答える