控制slideToggle（）jQuery

Question

我有4个form_header div和4个form_body div。我正在使用jQuery slideToggle（）通过单击表单标题来扩展form_body div。

这是我正在做的一个完美的例子： jQuery collapsible div

这是我用过的代码：

<script type="text/javascript">
                $(document).ready(function(){

        $(".form_body").hide();

        $(".form_header").click(function(){
            $(this).next(".form_body").slideToggle(0);
        });
        });
    </script>

我想要的是当我花费其中一个div时，我扩展另一个div，扩展的一个崩溃，这样一个人不能同时扩展其中的两个或更多个。我怎样才能做到这一点？谢谢你的帮助。

Answer 1

使用jQuery UI Accordion可能会更好。您所使用的功能已经内置。

Answer 2

正如已经指出的那样，为此使用插件可能更容易，但另外，这样的事情可以解决这个问题：

$(".form_header").click(function() {
   $(".form_body").not($(this).next()).slideUp();
   $(this).next(".form_body").slideToggle(); 
});

隐藏所有其他.form_body元素，然后切换正确的元素。查看运行here的示例。