手风琴
手风琴用于显示(或隐藏)的内容被分成段。
请点击下面的“公开组”按钮来看看它是如何工作的:
Lorem存有悲坐阿梅德,consectetur adipisicing ELIT,sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud实习ullamco laboris暂准UT aliquip前EA commodo consequat。
手风琴与图片:
Trolltunga,挪威
在W3-手风琴类定义了一个手风琴,和W3-手风琴内容类定义要显示的部分:
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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元素。
手风琴与下拉
下面的列表显示了手风琴和下拉之间的区别:
手风琴
Lorem存有悲坐阿梅德,consectetur adipisicing ELIT,sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud实习ullamco laboris暂准UT aliquip前EA commodo consequat。
- 含量为宽100%(跨越父元素的整个宽度)
- 当打开时,它会将网页内容了,如果有的话(位置:相对)
- 经常使用“打开”多节
手风琴按钮
您可以使用任意的HTML元素打开手风琴的内容。 我们宁愿一个按钮与W3-BTN-block类,因为它跨越其父元素的整个宽度,就像手风琴含量(宽度为100%)。 请记住,在W3.CSS按钮默认情况下居中。 如果你想他们左对齐,而不是使用W3-左对齐类。 但是,您不必按照我们的方法 - 手风琴会好看两种方式:
Lorem存有...
Lorem存有...
中心的内容,以及!
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</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%。 要覆盖这一点,W3-Accordion容器的CSS width属性更改:
一些文字..
一些文字..
一些文字..
一些文字..
例
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>
手风琴内容
手风琴的链接:
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
手风琴与列表的卡:
- 吉尔
- 前夕
- 亚当
例
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>
内Sidenav手风琴(注:您将了解更多关于侧导航版本):
例
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>
手风琴动画
使用任何W3-animate- 类褪色,缩放或幻灯片手风琴内容: