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

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

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 都必须包装this到一个 jquery 对象中,然后对该 jquery 对象执行该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 回答