根据单击切换特定div,隐藏同一类的所有其他div

时间:2013-09-17 18:08:37

标签: javascript jquery dom slidetoggle dom-manipulation

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

当我显示一个答案时,如果他们正在显示,我希望隐藏其他答案。

2 个答案:

答案 0 :(得分: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
    });
});

Fiddle

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

这是展示差异的jsperf test

答案 1 :(得分:2)

在您的点击事件中添加slideUp()以向上滚动所有内容。这将负责关闭/隐藏已经打开的div然后把你的代码。

Demo

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

编辑修复@smerny指出的内容。