请在此处查看我当前的代码: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();
});
});
当我显示一个答案时,如果他们正在显示,我希望隐藏其他答案。
答案 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
});
});
我将$(this).next(".ans");
保存到变量的原因是为了提高性能。如果我没有这样做,每次调用$(this).next(".ans");
时,jQuery都必须将this
包装到jquery对象中,然后在该jquery对象上执行next()
函数。在这种情况下,这只是一个额外的时间,但这仍然意味着2次不必要的操作。
这是展示差异的jsperf test。
答案 1 :(得分: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指出的内容。