1

ここで私の現在のコードを参照してください: http://jsfiddle.net/swQLg/3/

私はいくつかのdivのようなものを持っています

<div class="qtn">question1</div>
<div class="ans">answer1</div>
<div class="qtn">question2</div>
<div class="ans">answer2</div>
<div class="qtn">question3</div>
<div class="ans">answer3</div>
<div class="qtn">question4</div>
<div class="ans">answer4</div>

私のjquery関数は

$(document).ready(function () {
    $(".qtn").on('click', function () {
        $(this).next(".ans").slideToggle();
    });
});

1つの回答を表示すると、他の回答が表示されている場合は非表示にしたいと思います。

4

2 に答える 2

4

これを試して：

$(document).ready(function () {
    $(".qtn").on('click', function () {
        var $ans = $(this).next(".ans");
        $ans.slideToggle(); //toggle the current one
        $(".ans").not($ans).slideUp(); //hide the others
    });
});

フィドル

$(this).next(".ans");変数に保存する理由は、パフォーマンスのためです。これを行わないと、 を呼び出すたびに$(this).next(".ans");、jQuery は jquery オブジェクトにラップしてから、その jquery オブジェクトに対して関数をthis実行する必要があります。next()この場合、余分な時間は 1 回だけですが、それでも不要な操作が 2 回あることを意味します。

これは、違いを示すjsperf テストです。

于 2013-09-17T18:11:38.633 に答える
2

クリックイベントを入れslideUp()て、すべてを上にスライドさせます。これにより、すでに開いている div を閉じたり非表示にしたりして、コードを配置できます。

デモ

$(document).ready(function () {
    $(".qtn").on('click', function () {
        $(".ans").not($(this).next(".ans")).slideUp(); // slide the rest up
        $(this).next(".ans").slideToggle();
    });
});

@smernyが指摘したものを修正するために編集されました。

于 2013-09-17T18:11:17.267 に答える