免費(fèi)AI編程助手
W3.CSS Accordions (折疊欄)
折疊欄
折疊欄用于顯示（和隱藏）HTML 內(nèi)容。
使用 w3-hide 類隱藏手風(fēng)琴內(nèi)容。
使用任何一種按鈕來打開和關(guān)閉內(nèi)容：
實(shí)例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
打開第一節(jié)</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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
用于打開折疊欄的元素和折疊欄的內(nèi)容都可以是任何 HTML 元素。
折疊欄與下拉列表
下表顯示了折疊欄和下拉菜單之間的區(qū)別：
| 折疊欄 | 落下 |
|---|---|
| 內(nèi)容將頁面內(nèi)容下推 | 內(nèi)容覆蓋現(xiàn)有頁面內(nèi)容 |
| 內(nèi)容通常是 100％ 寬 | 內(nèi)容為 160px 寬（默認(rèn)） |
| 通常用于打開多個(gè)部分 | 常用于打開一個(gè)部分 |
折疊欄按鈕
您可以使用任何 HTML 元素打開折疊欄內(nèi)容。我們更喜歡帶有 w3-block 類的按鈕來覆蓋頁面的整個(gè)寬度（ 100％ 寬度）。
請(qǐng)記住，W3.CSS 中的按鈕默認(rèn)處于居中位置。如果要讓它們左對(duì)齊，請(qǐng)使用 w3-left-align 類。但是，您不必遵循我們的方法,無論哪種方式，折疊欄都會(huì)看起來不錯(cuò)：
實(shí)例
<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">左對(duì)齊和全寬</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>中心內(nèi)容也是！</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
點(diǎn)擊式折疊欄
使用 JavaScript 突出顯示已打開（單擊）的折疊欄：
實(shí)例
// 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", "");
}
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
折疊欄寬度
默認(rèn)情況下，塊的寬度為 100％。要覆蓋此設(shè)置，請(qǐng)更改折疊欄容器的 CSS width 屬性：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
折疊欄內(nèi)容
折疊欄的鏈接：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
折疊欄列表：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
補(bǔ)充工具欄中的折疊欄（稍后您將了解有關(guān)補(bǔ)充工具欄的更多信息）：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
動(dòng)畫折疊欄
使用 w3-animate-class 來淡入，縮放或滑動(dòng)折疊欄內(nèi)容：
更多建議：