W3.CSS 手风琴
单击下面的"Open Section"按钮以查看手风琴的工作原理:
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.
Accordion with Images:
French Alps
手风琴
手风琴用于显示（和隐藏）HTML 内容。
使用w3-hide 类隐藏手风琴内容。
使用任何一种按钮打开和关闭内容:
实例
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</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 元素。
手风琴 vs. 下拉列表
此表显示手风琴和下拉列表之间的区别:
| Accordion | Dropdown |
|---|---|
| 内容将页面内容下推 | 内容覆盖现有页面内容 |
| 内容通常是 100% 宽 | 内容为 160 像素宽（默认） |
| 常用于打开多个section | 常用于打开一个section |
手风琴
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.
Dropdowns
手风琴按钮
您可以使用任何 HTML 元素打开手风琴内容。 我们更喜欢带有 w3-block 类的按钮，以跨越页面的整个宽度（100% 宽度）。
请记住，W3.CSS 中的按钮默认居中。 如果您希望它们左对齐，请使用 w3-left-align 类。 但是，您不必遵循我们的方法 - 无论哪种方式手风琴看起来都不错:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
实例
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal 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">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
活动手风琴按钮
使用 JavaScript 高亮打开（点击）的手风琴:
Some text..
Some other text..
实例
// 将 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", "");
}
手风琴宽度
默认情况下，块的宽度为 100%。 要覆盖它，请更改手风琴容器的 CSS 宽度属性:
Some text..
Some text..
Some text..
Some text..
实例
<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>Some text..</p>
</div>
</div>
手风琴内容
带链接的手风琴:
实例
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
作为列表的手风琴:
- Jill
- Eve
- Adam
实例
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
侧边栏内的手风琴（稍后您将了解有关侧边栏的更多信息）:
实例
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
动画手风琴
使用任何 w3-animate-类 淡化、缩放或滑动手风琴内容:
