W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

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:

Trolltunga, Norway

w3-accordion 类定义一个手风琴, w3-accordion-content 类定义要被显示的部分:

Example

<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 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.


  • 内容宽度为100%(跨整个父元素的宽度)
  • 打开时,如果有的话会将页面内容向下推(位置:相对)
  • 通常用于“打开”多个部分

下拉菜单

  • 内容最小为160px宽,如果需要,则更多
  • 打开时,它覆盖了页面内容(位置:绝对)
  • 通常用来“打开”一个部分

手风琴按钮

您可以使用任何HTML元素来打开手风琴内容。 我们喜欢一个带有 w3-btn-block 类的按钮,因为它跨越了整个父元素的宽度,就像手风琴内容(100%宽度)一样。 请记住,W3.CSS中的按钮默认为中心对齐。 如果您希望它们左对齐,请使用 w3-left-align 类。

Lorem ipsum...

Lorem ipsum...

Centered content as well!

Example

<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来突出显示已打开的手风琴(点击):

Some text..

Some other text..

Example

// 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 容器的 width 属性:

Some text..

Some text..

Some text..

Some text..

Example

<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>

尝试一下 »


手风琴内容

带链接的手风琴:

Example

<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>

尝试一下 »

手风琴用作列表卡片:
  • Jill
  • Eve
  • Adam

Example

<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>

尝试一下 »

侧边导航内的手风琴(注意: 更多的侧边导航相关知识,在后面的章节中将为您详细介绍。):

Example

<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-classes 类用来淡化,放大或滑动手风琴中的内容:

Example

<div id="Demo1" class="w3-accordion-content w3-animate-zoom">

尝试一下 »