0

FAQページを作成しています。

答えのオープンとクローズを切り替えたい。私はjqueryを使用してそれを動作させています。

また、「開いている」セレクターにクラス（.active）を追加したいと思います。クラスを親に追加できます。

私の問題はこれです：エンドユーザーはクラスの追加を理解しないので、クラス化されていない要素を使用する必要があります。スタイルが設定されていないブロック要素である必要があります。したがって、次のようになります。

<h3 class="active">Activator</h3>
  <p>show</p>
<h3>Activator</h3>
  <p>hide</p>
<h3>Activator</h3>
  <p>hide</p>
etc...

スクリプトがクリックされたh3にclass.activeを追加すると、すべてのh3タグにclass.activeが追加されます。

これが私のコードです：

$(document).ready(function() {
    $('.content p').hide();
    $('h3').click(function(){
        $(this).next("p").toggle(250);
    });
    $(".content h3").click(function(){
        $(".content h3").toggleClass("active");
    });
});

リンク：作業デモ/サイト よろしくお願いします。

4

1 に答える 1

2

clickこれは、ハンドラー内のすべての要素をで選択しているためです$(".content h3")。this代わりに、クリックされた要素だけを取得するために参照する必要があります。

$(document).ready(function() {
    $('.content p').hide();
    $('h3').click(function(){
        $(this).next("p").toggle(250);
    });
    $(".content h3").click(function(){
        $(this).toggleClass("active");
    });
});

編集：良いトリックは、CSSを次のように設定することです。

.content p
{
    display: none;
}
.content h3.active + p
{
    display: block;
}

隣接する兄弟コンビネータ（）を使用することにより、がアクティブであるかどうかに基づいて+の表示を制御します。次に、JavaScriptを単純化できます。<p><h3>

$(document).ready(function() {
    $(".content h3").click(function() {
        $(this).toggleClass("active");
    });
});

この方法でアニメーションを失いますが、CSS3トランジションを使用してアニメーションを追加し直すことができます。

編集：高さが固定されていない場合、高さの遷移には注意が必要です。移行することで実現できますmax-heightが、折りたたむと遅延が発生する可能性があります。値を試して、かなりうまく機能するものを取得できます。これが私が思いついたものです：jsfiddle.net/FsVPn

于 2013-01-24T23:27:57.380 に答える