W3.CSS Accordions (折叠栏)

2020-12-01 11:24 更新

折叠栏

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

折叠栏按钮

您可以使用任何 HTML 元素打开折叠栏内容。我们更喜欢带有 w3-block 类的按钮来覆盖页面的整个宽度( 100% 宽度)。

请记住,W3.CSS 中的按钮默认处于居中位置。如果要让它们左对齐,请使用 w3-left-align 类。但是,您不必遵循我们的方法,无论哪种方式,折叠栏都会看起来不错:

实例

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

<div id="Demo1" class="w3-hide w3-container w3-light-grey">

<p>我很抱歉...</p>

</div>

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

<div id="Demo2" class="w3-hide w3-container">

<p>拿着它...</p>

</div>

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

<div id="Demo3" class="w3-hide w3-container w3-center w3-pale-red">

<p>中心内容也是!</p>

</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%。要覆盖此设置,请更改折叠栏容器的 CSS width 属性:

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例

折叠栏列表

实例

<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:160px;">

  <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-class 来淡入,缩放或滑动折叠栏内容:

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号