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()功能

之前

旁注

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

profile

<强> Demo

Answer 2

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

<强> Live Demo

$(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中的就绪事件

DEMO：http://jsfiddle.net/yVa3U/7/

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

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

3 个答案: