菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA 生成式 AI SCIPY AWS 网络安全 数据科学
     ❯   

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.

带图片的折叠面板

Alps

法国阿尔卑斯山


手风琴

手风琴用于显示(和隐藏)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 宽(默认)
常用于打开多个部分 常用于打开一个部分

手风琴

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.

下拉菜单



手风琴按钮

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

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

Lorem ipsum...

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", "");
}

自己动手试一试 »


手风琴宽度

默认情况下,块的宽度为 100%。要覆盖此设置,请更改手风琴容器的 CSS 宽度属性

一些文本..

一些文本..

一些文本..

一些文本..

示例

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

自己动手试一试 »

作为列表的手风琴
  • Jill
  • Eve
  • Adam

示例

<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:200px;">
  <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-classes 以淡入、缩放或滑动方式显示手风琴内容

示例

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

自己动手试一试 »


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持