点击展开或收折的选单
这篇教学会使用 HTML 的 checkbox 和 label 作为按钮，实作可以展开或收折的选单，并进一步搭配 button 元素和美化样式，做出可以一键收起和漂亮的特色选单。
快速导览：
点击后展开选单
要单纯使用 CSS 实现点击后展开选单的功能，可以借由类型为 checkbox 的 input 元素，搭配选择器中的“虚拟类别选择器”和“相邻兄弟选择器”，就能实现勾选 checkbox 时展开选单的功能，进一步搭配 label 的 for 属性，也能做到点击 label 就展开选单的效果。
<!-- HTML 程式碼 -->
<div class="menu">
<label for="b1">點我開啟/收折選單</label>
<input type="checkbox" id="b1">
<div class="submenu">
<div>Apple</div>
<div>Banana</div>
<div>OXXO</div>
<div>Orange</div>
</div>
</div>
<!-- CSS 程式碼 -->
<style>
.menu {
box-sizing: border-box;
width: 300px;
padding: 10px;
margin: 20px;
font-size: 30px;
border: 1px solid #000;
}
label {cursor: pointer;}
.submenu {display: none;} /* 隱藏子選單 */
/* 勾選 checkbox 時，相鄰的下一個兄弟元素 .submenu 就顯示 */
input:checked + .submenu {
display: block;
}
</style>
了解原理之后，就能隐藏 checkbox，单纯透过点击 label 展开或收折选单，搭配 transition 实现简单的转场效果，但需要注意如果“没有设定子选单的高度”，会造成转场失效的状况，这时可以透过设定 max-height，让子选单仍然在展开时可保持内容高度，但又具有转场效果 ( 不过 transition 的持续时间需要设定“两组不同时间”，才能让展开和收折的转场速度接近 )。
<!-- HTML 程式碼 -->
<div class="menu">
<label for="b1">點我開啟/收折選單</label>
<input type="checkbox" id="b1" class="btn">
<div class="submenu">
<div>Apple</div>
<div>Banana</div>
<div>OXXO</div>
<div>Orange</div>
</div>
<label for="b2">點我開啟/收折選單</label>
<input type="checkbox" id="b2" class="btn">
<div class="submenu">
<div>Apple</div>
<div>Banana</div>
<div>OXXO</div>
<div>Orange</div>
</div>
</div>
<!-- CSS 程式碼 -->
<style>
.menu {
box-sizing: border-box;
width: 300px;
margin: 20px;
padding: 10px;
font-size: 30px;
border: 1px solid #000;
}
input {display: none;} /* 隱藏 checkbox */
label {cursor: pointer;} /* 滑鼠移動到上方時為手形指標 */
.submenu {
overflow: hidden; /* 超過範圍就隱藏 */
width: 100%; /* 寬度為父元素寬度 100% */
max-height: 0; /* 設定最大高度為 0，讓 transition 能有作用 */
transition: .5s; /* 轉場時間 0.5 秒 */
padding-left: 10px;
margin-bottom: 10px;
}
/* 勾選 checkbox 時，相鄰的下一個兄弟元素 .submenu 就顯示 */
input:checked + .submenu {
max-height: 500px; /* 設定最大高度為 500px，讓 transition 能有作用 */
transition: 1s; /* 因為最大高度可能比內容高度高得多，所以秒數設定較多 */
}
</style>
点击后收折全部选单
上述的范例在 checkbox“取消勾选”时会收折选单，如果要透过单一颗按钮收折全部的选单，则可以透过类型为 reset 的 button，点击之后就会重设 form 元素中所有的表单元素，但需要注意，使用这种方法需要将 button 和 checkbox 放在同一个 form 里，下方范例会展示收折全部选单的效果 ( 一键打开选单的效果则需要透过 JavaScript 才能顺利实现 )。
<!-- HTML 程式碼 -->
<form class="menu">
<button type="reset">收折全部選單</button>
<label for="b1">點我開啟/收折選單</label>
<input type="checkbox" id="b1">
<div class="submenu">
<div>Apple</div>
<div>Banana</div>
<div>OXXO</div>
<div>Orange</div>
</div>
<label for="b2">點我開啟/收折選單</label>
<input type="checkbox" id="b2">
<div class="submenu">
<div>Apple</div>
<div>Banana</div>
<div>OXXO</div>
<div>Orange</div>
</div>
</form>
<!-- CSS 程式碼 -->
<style>
.menu {
box-sizing: border-box;
width: 300px;
margin: 20px;
padding: 10px;
font-size: 30px;
border: 1px solid #000;
}
input {display: none;} /* 隱藏 checkbox */
label {cursor: pointer;} /* 滑鼠移動到上方時為手形指標 */
.submenu {
overflow: hidden; /* 超過範圍就隱藏 */
width: 100%; /* 寬度為父元素寬度 100% */
max-height: 0; /* 設定最大高度為 0，讓 transition 能有作用 */
transition: .5s; /* 轉場時間 0.5 秒 */
padding-left: 10px;
margin-bottom: 10px;
}
input:checked + .submenu {
max-height: 500px; /* 設定最大高度為 500px，讓 transition 能有作用 */
transition: 1s; /* 因為最大高度可能比內容高度高得多，所以秒數設定較多 */
}
button {
font-size: 20px;
display: block;
margin: 5px 5px 10px 5px;
}
</style>
点击后弹出选单
运用勾选和取消 checkbox 的做法，搭配修饰过后的选单，就能做出点击后弹出和收起的漂亮选单，下方范例将选单都设计成圆形，并使用一些简单的图案符号，就能让选单别具特色。
<!-- HTML 程式碼 -->
<div class="menu">
<label for="b1">㊕</label>
<input type="checkbox" id="b1">
<div class="submenu">♠</div>
<div class="submenu">♦</div>
<div class="submenu">♣</div>
<div class="submenu">♥</div>
</div>
<!-- CSS 程式碼 -->
<style>
.menu {
position: relative;
box-sizing: border-box;
width: 300px;
margin: 20px;
font-size: 30px;
}
input {display: none;} /* 隱藏 checkbox */
label {
position: absolute; /* label 絕對定位 */
top: 0;
left: 0;
display: block; /* 改成 block 區塊容器 */
cursor: pointer; /* 手形指標 */
width: 50px;
height: 50px;
line-height: 50px; /* 讓內容圖案垂直置中 */
text-align: center; /* 讓內容圖案水平置中 */
border-radius: 50%; /* 圓角 */
background: #09f;
color: #fff;
}
.submenu {
position: absolute; /* 所有子選單絕對定位，位置和 labe 相同 */
top: 0;
left: 0;
z-index: -1; /* 子選單放在 label 之下 */
cursor: pointer; /* 手形指標 */
width: 50px;
height: 50px;
line-height: 50px; /* 讓內容圖案垂直置中 */
text-align: center; /* 讓內容圖案水平置中 */
border-radius: 50%; /* 圓角 */
color: #fff;
opacity: 0; /* 透明度為 0 */
}
.submenu:nth-of-type(1) {
background: #f55; /* 第一個子選單的顏色和轉場時間 */
transition: .3s;
}
.submenu:nth-of-type(2) {
background: #f90; /* 第二個子選單的顏色和轉場時間，延遲 0.1s */
transition: .3s .1s;
}
.submenu:nth-of-type(3) {
background: #0c0; /* 第三個子選單的顏色和轉場時間，延遲 0.2s */
transition: .3s .2s;
}
.submenu:nth-of-type(4) {
background: #f7f; /* 第四個子選單的顏色和轉場時間，延遲 0.3s */
transition: .3s .3s;
}
input:checked ~ .submenu {
opacity: 1; /* 顯示子選單時，透明度為 1 */
}
input:checked ~ .submenu:nth-of-type(1) {
left: 120px; /* 第一個子選單出現的位置 */
}
input:checked ~ .submenu:nth-of-type(2) {
top: 50px; /* 第二個子選單出現的位置 */
left: 90px;
}
input:checked ~ .submenu:nth-of-type(3) {
top: 90px; /* 第三個子選單出現的位置 */
left: 50px;
}
input:checked ~ .submenu:nth-of-type(4) {
top: 120px; /* 第四個子選單出現的位置 */
left: 0;
}
</style>
小结
CSS 的点击展开收折效果其实并不困难，最主要是透过 checkbox 和 label 搭配选择器的应用，就可以轻松办到，而且还不需要 JavaScript 的辅助喔！
微信扫码关注
抖音扫码关注