jQuery UI可折叠面板

Question

我注意到在jQuery UI主题滚动网站(左侧)上，他们有可折叠的面板，用于分组自定义jQuery UI包的自定义选项。

但是，我在jQuery UI中没有看到可折叠面板(对我来说似乎很奇怪！)

有没有人知道像这样工作的jQuery的可折叠面板选项(带箭头和所有)？

http://jqueryui.com/themeroller/

Answer 1

我想你要找的是手风琴：

http://jqueryui.com/demos/accordion/

但是，如果您希望打开多个部分，请查看accordion文档的这一部分(概述)：

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

或动画：

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});

Answer 2

为此，您不需要JQuery UI。只是老生常谈的Jquery。它们通常被称为collaspable。

将单击事件附加到“header”div，它会向下/向上滑动相关的内容div。要获得打开/关闭的图像，请切换标题上的css类以更改图像。

Answer 3

你指的是手风琴类。下面是我如何在PHP中使用它：

echo "<div class='accordion'>";
  echo "<H2>Event Details</H2>";
 echo "<p>". $row['eNotes']. "</p>";
echo "</div>";

这是我的一小段jQuery：

$(document).ready(

            function() 
            {

                // ACCORDIAN
                $(".accordion H2:first").addClass("active");
                $(".accordion p:not(:first)").hide();

                $(".accordion h2").click(function(){

                $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
                $(this).toggleClass("active");
                $(this).siblings("H2").removeClass("active");

        });
            }
    );