W3.CSS 手风琴

点击下面的“打开部分”按钮，查看手风琴的工作原理

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

链接 1 链接 2 链接 3

带有图片的手风琴

法国阿尔卑斯山

手风琴

手风琴用于显示（和隐藏）HTML 内容。

使用 **w3-hide** 类隐藏手风琴内容。

使用任何类型的按钮打开和关闭内容

示例

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
打开部分 1</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（默认）
通常用于打开多个部分	通常用于打开一个部分

手风琴

链接 1 链接 2 链接 3

下拉菜单

手风琴按钮

您可以使用任何 HTML 元素打开手风琴内容。我们更喜欢带有 **w3-block** 类的按钮，以跨越页面的整个宽度（100% 宽度）。

请记住，W3.CSS 中的按钮默认情况下居中。如果您希望将它们左对齐，请使用 **w3-left-align** 类。但是，您不必遵循我们的方法 - 手风琴无论如何看起来都不错

Lorem ipsum...

内容也居中！

示例

<button onclick="myFunc('Demo1')" class="w3-button">
普通按钮</button>

<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align w3-green">
左对齐且全宽</button>

<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">
居中且全宽</button>

<div id="Demo3" class="w3-hide w3-center">
<p>内容也居中!</p>
</div>

自己试试 »

活动手风琴按钮

使用 JavaScript 突出显示打开（已点击）的手风琴

一些文本..

一些其他文本..

示例

// 将 w3-red 类添加到所有打开的手风琴
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", "");
}

自己试试 »