javascript - 根据点击切换特定的 div，隐藏同一类的所有其他 div

Question

在这里查看我当前的代码: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();
    });
});

当我显示一个答案时，我希望它能隐藏显示的其他答案。

Answer 1

试试这个:

$(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
    });
});

Fiddle

我将 $(this).next(".ans"); 保存到变量的原因是为了性能。如果我不这样做，每次调用 $(this).next(".ans"); 时，jQuery 都必须将 this 包装成一个 jquery对象，然后对该 jquery 对象执行 next() 函数。在这种情况下，这只会是 1 次额外时间，但这仍然意味着 2 次不必要的操作。

这是一个jsperf test展示差异。