2

ひどいタイトルですが、問題の名前を付けるのに苦労しました。

いくつかのボックスを作成しようとしていますが、すべてボタンをクリックするだけで.slideToggle()、大量の情報が表示されます。私の問題は、各ボックスに独自のボタンが必要なことです。これは、現在コード化されているため、どのボタンをクリックしても、説明の 1 つだけが展開および折りたたまれるためです。

次のjQueryコードを書きました：

$(document).ready(function() {
    $('#sponsor-description').hide();

    $('#sponsor .expand').click(function() {
         $('#sponsor-description').slideToggle('slow');
    });
});

Web サイト (オレンジ色の [Expand] ボタンをクリック) で試してみることができます: http://dacc.fredrixdesign.com/sponsors/ .

「展開」ボタンの 1 つをクリックすると、対応する説明が下にスライドするようにするにはどうすればよいですか? 何らかの形で役立つと思い$(this)ますが、よくわかりません。ありがとう！

4

1 に答える 1

3

#sponsor-description は ID です。あなたは本当にIDを悪用しています。要素ごとに一意である必要があります。一意の ID を使用するか、CSS クラスから離れたより優れたセレクターを使用することをお勧めします。

現在、スポンサーの説明をすべての説明要素の ID として使用しているため、コードが失敗します。

Wordpress についてはわかりませんが、これらすべての id 属性をクラスに変更できれば、ゴールデンになります。それらを変更できると仮定すると、コードは次のようになります。

$('.sponsor .expand').click(function() {
     $(this).parents('.sponsor').children('.sponsor-description').slideToggle('slow');
});
于 2013-03-06T22:46:20.427 に答える