jQuery UI 折叠面板

Question

我注意到在jQuery UI主题生成器网站（左侧）上，他们有可折叠面板来分组自定义jQuery UI包的选项。

但是，在jQuery UI中我没有看到那个可折叠的面板（对我来说似乎很奇怪！）

是否有人知道任何像那样的jQuery可折叠面板选项（带有箭头等）？ http://jqueryui.com/themeroller/

- stewart715

Answer 1

对于这个问题，你不需要使用JQuery UI，只需要使用纯粹的Jquery即可。它们通常被称为可折叠的div。

将点击事件附加到“header” div上，以滑动打开/关闭相关的内容div。要获取打开/关闭的图片，请在头部切换css类以更改图像。

- Chris Rogers

---

我知道如何滑动一个div，但我想用覆盖效果来滑动div，这样就不会破坏页面上的其他内容。该怎么做？ - Badhon Jain

Answer 2

我认为你正在寻找手风琴效果：

http://jqueryui.com/demos/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();
});

- Andrew Whitaker

---

不是手风琴。请注意，可以同时打开零个、一个或多个 div。手风琴无法做到这一点。 - Chris Rogers

虽然@Chris是正确的，但你发布的代码也很不错:)谢谢！ - stewart715

代码不再起作用了，唉。在手风琴演示中，jQuery('#accordion .head')找不到任何元素。 - Peter V. Mørch

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");

        });
            }
    );

- paparush