Question

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

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

有没有人知道jQuery的任何可折叠面板选项就像那样的工作（带箭头和所有）？

http://jqueryui.com/themeroller/

Answer 1

您不需要JQuery UI。只是直接老Jquery。它们通常被称为collaspable div。

将点击事件附加到“标题”div，向下/向上滑动关联的内容div。要获取打开/关闭图像，请在标题上切换css类以更改图像。

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();
});

Answer 3

您指的是Accordion课程。以下是我如何使用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");

        });
            }
    );

jQuery UI可折叠面板

3 个答案: