jQuery可扩展和可折叠div

在我正在创建的FAQ页面上，我遇到了一些扩展和折叠div的小问题。当用户单击一个问题时，它需要折叠所有其他答案div，并仅扩展单击的问题div的答案。我现在已经找到了答案-除非用户单击了页面上的所有div，它们都已展开，然后折叠，然后需要两次鼠标单击才能重新打开它们，而不仅仅是一次

jQuery：

$(document).ready(function() {
$('.answer').hide(); // hide the answer divs first

$('#content .question').click().toggle(
    function() {
         $('.answer').hide(); //hide all other divs when clicked
         $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon
         $(this).next('.answer').slideDown();  //slidedown the appropriate div
         $(this).addClass('close'); //as well as insert the 'expanded' icon
         },
         function() {
            $(this).next('.answer').slideUp(); // hide the selected div
            $(this).removeClass('close'); // as well as remove the 'expanded' icon
            }
        );
    });

CSS:

HTML:

---

有什么想法吗？

这可能就是你想要的：

这是一个修改，允许你点击问题之外的任何地方，所有答案将被重新关闭。注意使用e.stopPropagation防止答案总是被重新隐藏

这里有一个例子

在这种情况下，您不需要使用切换：

 $('#content .question').click(function() {
     $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon
     $('#content .answer').slideUp();
     $(this).next('.answer').slideDown(); //slidedown the appropriate div
     $(this).addClass('close'); //as well as insert the 'expanded' icon
    });
  });

此外，我将此添加到css中，以便您的答案默认不显示：

.answer {
   display: none;
}

---

也许值得一看jqueryui和accordion特性。它有你所描述的一切：谢谢大家的及时回答，他们都是很好的答案，我选择了Lerevemes答案作为一个最适合我的需要-它现在工作得很好。也谢谢大家！

$('.answer').hide(); // hide the answer divs first

$('.question').click(function() {
    $('.answer').slideUp();
    $(this).next('.answer').slideDown();
});

$('.answer').hide(); // hide the answer divs first

$('.question').click(function(e) {
    $('.answer').slideUp();
    $(this).next('.answer').slideDown();
    e.stopPropagation();
});

$(document).click(function(){
    $('.answer').slideUp();
});

 $('#content .question').click(function() {
     $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon
     $('#content .answer').slideUp();
     $(this).next('.answer').slideDown(); //slidedown the appropriate div
     $(this).addClass('close'); //as well as insert the 'expanded' icon
    });
  });

.answer {
   display: none;
}