手风琴折叠效果 - jQuery UI accordion

最新推荐文章于 2025-06-03 09:11:21 发布

原创最新推荐文章于 2025-06-03 09:11:21 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #Accordion #toggle

前端开发学习流程专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用jQuery的Accordion组件来实现网页上的折叠面板效果，包括使所有内容可折叠、自定义图标、滑鼠移动时自动打开内容等功能。

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

在最近几天的实习过程中，有一个需求是从数据库中获取所有的历史数据表格并显示在浏览器页面上，但是因为历史数据过多，全部显示影响了页面的美观且不易查找。通过上网查找资料，我发现了jQuery中一个极其好用的折叠面板部件-accordion。
下面是我实现的效果：
result

1、折叠内容
accordion组件预设情况下总有一项内容是展开的，当点击其他部分的标题，该部分内容可见，但无法将所有内容都折叠起来，如果要支持所有部分都可以折叠，可以通过配置collapsible属性。

$(function() {
    $( "#accd" ).accordion({
      collapsible: true
    });
  });

2、自定义图标
通过 icons 选项自定义标题图标，icons 选项接受标题默认和打开状态的 class。使用 UI CSS 框架中的任意 class，或者使用背景图像创建自定义的 class。
常见的自定义图标

        $(function() {
            var icons = {
                header: "ui-icon-circle-arrow-e",    //默认值ui-icon-triangle-1-e
                activeHeader: "ui-icon-circle-arrow-s" //默认值ui-icon-triangle-1-s
            };
            $( "#accd" ).accordion({
                icons: icons,
            });
            $( "#toggle" ).button().click(function() {
                if ( $( "#accd" ).accordion( "option", "icons" ) ) {
                    $( "#accd" ).accordion( "option", "icons", null );
                } else {
                    $( "#accd" ).accordion( "option", "icons", icons );
                }
            });
        });

3、滑鼠移动式自动打开内容
默认情况下，打开 accordion 某个部分内容，是点击该部分标题，如果需要实现移动滑鼠到该部分自动展开内容，可以设置 event 属性，例如：

 $(function () {
    $("#accd").accordion({
        event: "mouseover"
    });
});

4、在jQuery代码段中需要引入
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
5、一个简单的关于实现折叠效果的例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  //以下四个脚本必须引入
  <link rel="stylesheet" href="assets/jquery-ui.min.css">
  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  <script src="assets/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="assets/style.css">

  <script>
        $(function() {
            var icons = {
                header: "ui-icon-circle-arrow-e",
                activeHeader: "ui-icon-circle-arrow-s"
            };
            $( "#accd" ).accordion({
                icons: icons,
            });
            $( "#toggle" ).button().click(function() {
                if ( $( "#accd" ).accordion( "option", "icons" ) ) {
                    $( "#accd" ).accordion( "option", "icons", null );
                } else {
                    $( "#accd" ).accordion( "option", "icons", icons );
                }
            });
        });
  </script>
</head>
<body>

<div id="accd">
  <h3>Part one</h3>
  <div>
    <p>cccccccc</p>
  </div>
  <h3>Part two</h3>
  <div>
    <p>cccccccc</p>
  </div>
  <h3>Part three</h3>
  <div>
    <p>cccccccc</p>
    <ul>
      <li>1.cccccccc</li>
      <li>2.cccccccc</li>
      <li>3.cccccccc</li>
    </ul>
  </div>
  <h3>Part four</h3>
  <div>
    <p>cccccccc</p>
  </div>
</div>
</body>
</html>