W3.CSS Accordions (折叠栏)
折叠栏
折叠栏用于显示（和隐藏）HTML 内容。
使用 w3-hide 类隐藏手风琴内容。
使用任何一种按钮来打开和关闭内容：
实例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
打开第一节</button>
<div id="Demo1" class="w3-container w3-hide">
<p>一些文本......</p>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
用于打开折叠栏的元素和折叠栏的内容都可以是任何 HTML 元素。
折叠栏与下拉列表
下表显示了折叠栏和下拉菜单之间的区别：
| 折叠栏 | 落下 |
|---|---|
| 内容将页面内容下推 | 内容覆盖现有页面内容 |
| 内容通常是 100％ 宽 | 内容为 160px 宽（默认） |
| 通常用于打开多个部分 | 常用于打开一个部分 |
折叠栏按钮
您可以使用任何 HTML 元素打开折叠栏内容。我们更喜欢带有 w3-block 类的按钮来覆盖页面的整个宽度（ 100％ 宽度）。
请记住，W3.CSS 中的按钮默认处于居中位置。如果要让它们左对齐，请使用 w3-left-align 类。但是，您不必遵循我们的方法,无论哪种方式，折叠栏都会看起来不错：
实例
<button onclick="myFunction('Demo1')" class="w3-button w3-light-grey">普通按钮</button>
<div id="Demo1" class="w3-hide w3-container w3-light-grey">
<p>我很抱歉...</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-button w3-block w3-left-align w3-green">左对齐和全宽</button>
<div id="Demo2" class="w3-hide w3-container">
<p>拿着它...</p>
</div>
<button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-red">居中全宽</button>
<div id="Demo3" class="w3-hide w3-container w3-center w3-pale-red">
<p>中心内容也是！</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
点击式折叠栏
使用 JavaScript 突出显示已打开（单击）的折叠栏：
实例
// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-red";
} else {
x.className = x.className.replace("w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
尝试一下 »
点击“尝试一下”按钮查看在线实例
折叠栏宽度
默认情况下，块的宽度为 100％。要覆盖此设置，请更改折叠栏容器的 CSS width 属性：
实例
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')" class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>一些文本..</p>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
折叠栏内容
折叠栏的链接：
实例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
折叠栏</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">链接 1</a>
<a href="#" class="w3-button w3-block w3-left-align">链接 2</a>
<a href="#" class="w3-button w3-block w3-left-align">链接 3</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
折叠栏列表：
实例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
折叠栏</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>孙子</li>
<li>孔子</li>
<li>老子</li>
</ul>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
补充工具栏中的折叠栏（稍后您将了解有关补充工具栏的更多信息）：
实例
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:160px;">
<a href="#" class="w3-bar-item w3-button">链接 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">折叠栏</a>
<div id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">链接</a>
<a href="#" class="w3-bar-item w3-button">链接</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">下拉</a>
<div id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">链接</a>
<a href="#" class="w3-bar-item w3-button">链接</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
动画折叠栏
使用 w3-animate-class 来淡入，缩放或滑动折叠栏内容：