【JQuery UI】面板折叠插件——accordion

最新推荐文章于 2023-04-23 09:24:40 发布

原创最新推荐文章于 2023-04-23 09:24:40 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一种使用jQuery插件实现的手风琴面板折叠效果，通过简单的代码即可让页面上的多个面板具备展开与折叠的功能，适用于制作简洁的网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：

$(selector).accordion({options});

其中，参数selector为整个面板元素，options参数为方法对应的配置对象。

例子：调用折叠面析插件的accordion()方法，实现页面中多个面板的折叠效果。

    <body>
        <div id="divtest">
            <div id="accordion">
                <h3>
                    <a href="#">白富美</a>
                </h3>
                <p>咱们结婚吧!</p>
                <h3>
                    <a href="#">土豪族</a>
                </h3>
                <p>咱们交个朋友吧!</p>
                <h3>
                    <a href="#">明星</a>
                </h3>
                <p>那个谁？</p>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>
    </body>