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

【问题标题】：Toggle specific div based on click, hide all other divs of the same class根据点击切换特定的 div，隐藏同一类的所有其他 div
【发布时间】：2013-09-22 07:21:46
【问题描述】：

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

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

【问题讨论】：

你的意思是你想隐藏所有的 div，除了你打开的那个吗？
您希望一次只打开一个答案 div。对吗？
没关系，两个现场答案已经做到了:)

标签： javascript jquery dom slidetoggle dom-manipulation

【解决方案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 展示了不同之处。

【讨论】：

【解决方案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 指出的内容。

【讨论】：

这将隐藏，然后当用户试图隐藏它时显示当前元素。