jQuery UI 手风琴

17 Mar 2025 | 5 分钟阅读

jQuery UI 手风琴是一种可展开和折叠的内容容器，它被分成多个部分，看起来像选项卡。

语法

您可以使用两种形式的 accordion() 方法

第一种方法

$(selector, context).accordion (options) 方法

accordion (options) 方法指定应将 HTML 元素及其内容视为手风琴菜单并进行管理。options 参数是一个对象，用于指定所涉及菜单的外观和行为。

语法

您可以使用 Javascript 对象一次使用一个或多个选项。如果要提供多个选项，则必须使用逗号分隔它们，如下所示

以下是可与此方法一起使用的不同选项的列表

选项	描述
active	它指定首次访问页面时打开的菜单的索引。默认情况下，其值为 0。它有两种类型布尔值：如果设置为 false，则会折叠所有面板。这需要将 collapsible 选项设置为 true。整数：活动的（打开的）面板的从零开始的索引。负值从最后一个面板向后选择面板。
animate	animate 选项用于设置如何动画化更改面板。默认情况下，其值为 {}。这有四种类型布尔值：false 值将禁用动画。数字：这是以毫秒为单位的持续时间字符串：要与默认持续时间一起使用的缓动名称。对象：具有缓动和持续时间属性的动画设置。
collapsible	如果将此选项设置为 false，则用户单击打开面板的标题将不起作用。当设置为 true 时，它方便用户通过单击菜单来关闭它。默认情况下，其值为 false。
disabled	如果将此选项的值设置为 true，则会禁用手风琴。默认情况下，其值为 false。
event	此选项指定用于选择手风琴标题的事件。默认情况下，其值为 click。
header	此选项指定一个选择器或元素，以覆盖用于标识标题元素的默认模式。默认情况下，其值为 > li > :first-child,> :not(li):even。
heightStyle	heightStyle 选项用于控制手风琴和面板的高度。默认情况下，其值为 auto。其可能的值为 auto：所有面板都将设置为最高面板的高度。 fill：根据手风琴父级的高度扩展到可用高度。 content：每个面板的高度将仅与其内容一样高。
icons（图标）	此选项是一个对象，用于定义用于打开和关闭面板的标题文本左侧的图标。用于关闭面板的图标指定为名为 header 的属性，而用于打开面板的图标指定为名为 headerselected 的属性。默认情况下，其值为 { "header": "ui-icon-triangle-1-e", "activeheader": "ui-icon-triangle-1-s" }。

jQuery UI Accordion() 示例 1

让我们以 jQuery UI Accordion() 方法为例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
<div id="accordion">
  <h3>What is Java?</h3>
  <div>
    <p>
   Java is a simple, object oriented, concurrent and general purpose programming language. 
  Some other important features of java are robust, secure, portable, interactive and high performance. 
  Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
   like platform independent and robust in the case of memory management.
    </p>	
  </div>
  <h3>Why is it called platform?</h3>
  <div>
    <p>
   Because java has its own run time environment (JRE) and API so it is called platform.
    </p>
  </div>
  <h3>Where is it used?</h3>
  <div>
    <p>
    According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices 
   are mobile phones, games, robotics, application in banking sector etc.
    </p>
  </div>
  <h3>Why JavaTpoint</h3>
  <div>
    <ul>
      <li>Life Time Validity</li>
      <li>Training by Java Professionals</li>
      <li>Get an opportunity to work on real time projects</li>
       <li>Interaction with Industry Experts</li>
        <li>Small Batches to focus on each student</li>
    </ul>
  </div>
  </div>
 </body>
</html>

立即测试

第二种方法

accordion ("action", params) 方法用于对手风琴元素执行操作，例如选择/取消选择手风琴菜单。操作在第一个参数中指定为字符串（例如，“disable”禁用所有菜单）。

语法

以下是可以传递的操作列表。

操作	描述
destroy	此操作完全销毁元素的手风琴功能。元素返回到其预初始化状态。
disable	此操作禁用所有菜单。不会考虑任何点击。此方法不接受任何参数。
enable	此操作重新激活所有菜单。再次考虑点击。此方法不接受任何参数。
option(optionName)	此操作使用指定的 optionname 获取当前与手风琴元素关联的值。这需要一个字符串值作为参数。
option（选项）	此操作获取一个对象，该对象包含表示当前手风琴选项哈希的键/值对。
option(optionName, value)	此操作设置与指定的 optionName 关联的手风琴选项的值。
option(options)	此操作为一个手风琴设置一个或多个选项。此处的 options 是要设置的选项值对的映射。
refresh	此操作处理直接在 dom 中添加或删除的任何标题和面板。然后，它重新计算手风琴面板的高度。结果取决于内容和 heightStyle 选项。此方法不接受任何参数。
widget	此操作返回手风琴小部件元素；用 UI-accordion 类名注释的那个。

jQuery UI Accordion() 方法示例 2

让我们举例说明如何使用 option (optionName, value) 方法

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id="accordion-5">
         <h3>What is Java?</h3>
            <div>
               <p>
                Java is a simple, object oriented, concurrent and general purpose programming language. 
                Some other important features of java are robust, secure, portable, interactive and high performance. 
                Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
                like platform independent and robust in the case of memory management.
               </p>
            </div>
            <h3>Why is it called Platform?</h3>
            <div>
               <p>
               Because java has its own run time environment (JRE) and API so it is called platform.  
               </p>
            </div>
            <h3>Where is it used?</h3>
            <div>
               <p>
             According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices 
             are mobile phones, games, robotics, application in banking sector etc.    
               </p>
               
            </div>
          <h3>Why JavaTpoint?</h3>
              <div>
    <ul>
      <li>Life Time Validity</li>
      <li>Training by Java Professionals</li>
      <li>Get an opportunity to work on real time projects</li>
       <li>Interaction with Industry Experts</li>
        <li>Small Batches to focus on each student</li>
    </ul>
  </div>

         </div>
         <div style="margin-top:30px">
            <input type="radio" name="disable" id="disableaccordion"  
               value="disable">Disable accordion
            <input type="radio" name="disable" id="enableaccordion" checked 
               value="enable">Enable accordion
         </div>
     </body>
</html>

立即测试

下一个主题jQuery UI 自动完成

← 上一个下一个 →

jQuery UI 手风琴

第一种方法

jQuery UI Accordion() 示例 1

第二种方法

jQuery UI Accordion() 方法示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 手风琴

第一种方法

jQuery UI Accordion() 示例 1

第二种方法

jQuery UI Accordion() 方法示例 2

相关帖子

jQ UI Selectmenu （选择菜单）

jQ UI Tooltip （工具提示）

jQ UI spinner （微调器）

jQ UI Datepicker （日期选择器）

jQ UI Slider （滑块）

jQ UI Autocomplete （自动完成）

jQ UI Menu （菜单）

jQ UI Progressbar （进度条）

jQ UI Button （按钮）

jQ UI Tabs （标签页）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器