控制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

如前所述，使用插件可能会更容易，但也可以使用下面这样的插件：

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

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

Answer 2

使用jQuery UI Accordion可能会更好。你想要的功能已经内置了。