jquery - jQuery 在多个 div 之间切换开/关

Question

我有一个非常简单的 jQuery 切换在这里工作：http: //jsfiddle.net/yVa3U/1/ - 但我不知道如何在单击下一个 div 时关闭活动 div。

关于如何做到这一点的任何建议？

谢谢

$(document).ready(function() {

  $('.answer').hide();

  $(".toggle").click(function(){

      $("div[rel='profile_" + $(this).attr("profile") + "']").toggle(400);
});

});​

Answer 1

你应该添加

$(".answer").not($(this).next()).hide(400);

在调用toggle()函数之前

旁注

1. 您可以将行更改$("div[rel='profile_" + $(this).attr("profile") + "']").toggle(400);为 $(this).next().toggle(400);
2. 而不是使用属性profile，你应该更好地使用data属性

演示

Answer 2

您需要hide all点击答案except的current答案，您可以这样做，

现场演示

$(document).ready(function() {
    $('.answer').hide();
    $(".toggle").click(function() {
        currentAnswerDiv = $("div[rel='profile_" + $(this).attr("profile") + "']");
        $('.answer').not(currentAnswerDiv).hide();
        currentAnswerDiv.toggle(400);
    });
});​

Answer 3

您可以使用next()

$(".toggle").click(function() {
       var $next=$(this).next().toggle(400)
      $('.answer').not($next).hide();  
});

最好用 CSS 隐藏你的答案类，而不是在 javascript 中等待就绪事件

演示：http: //jsfiddle.net/yVa3U/7/

API参考：http ://api.jquery.com/next/