許多網站中會看到已經設定好的制式說明區，當中有條列是說明，並且可以點擊後有收闔的體驗，是採取二階層式的寫法。
HTML 架構
可以看到有兩層 ul li，第一層是 .cart，第二層就包在第一層的 li 內，並且標題區可以使用 a 連結做點擊效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <ul class="cart">
<li>
<a href="#">商家問道民國當天其。</a>
<ul>
<li>
<p>
歌詞中央，專利循環獨特員工廠商管理員網遊就是我說經銷商老大，鎖定資本一級點頭進口群發一樣查詢靈魂模樣工具創新，內置統計，審核再說你想本次，專輯便宜魯蛇生態你怎麼背後很難一次當前楠雅工廠人體不停標誌，工程腦袋很大神話熱情不限請大家業務可惜讓你一切都，賓館那。
</p>
</li>
<li>
<p>
各項產生大大顯然精選觀眾基地收入就是一般，從而演出優勢發言任務想要，或許主席有所興趣一旦，全體下來故事啟動就是作品望着遊戲不好生成新技術複製另外，隨便稱為組成，協議嚴格來源打了每次簽名身上那時發貼理論，農民一會貢獻我要沒什麼供應商，你看給我年代看法情感大。
</p>
</li>
<li>
<p>
昨天論文投訴一口廣播帶來指揮不可以不願承認，發展互動結婚積極還沒有有限責任公司東西表示教育，不會說了樹林你怎麼為此形象實現這麼多上傳躺在軟體嘿嘿，幫助目的商家證明，用戶名本科，你們我們提示組織回來增強遵守控制，推坑王一半電視台商機，你在當地教學，離開天堂。
</p>
</li>
</ul>
</li>
</ul>
|
CSS 樣式
這邊比較重要的是同階層的寫法，因為 ul li 又包了一層 ul li，我要設定不同層的 ul li 可以使用 > 指定為同層的元素，這樣網頁在找尋元素的時候就不會把所有相同的元素都選取起來。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| .main {
margin-top: 2%;
.cart {
background-color: #fff;
> li {
padding: 10px 0;
> a {
color: $primary;
font-size: 20px;
font-weight: bold;
}
}
ul {
margin-top: 10px;
p {
line-height: 1.5;
font-size: 16px;
color: $text;
margin-bottom: 10px;
}
}
}
}
|
jQuery 設定
希望讓選取第一個問題展開答案，但其他問題要收闔起來。
1
2
3
4
5
6
7
8
9
10
| $(document).ready(function () {
$(".cart > li > a").click(function (event) {
event.preventDefault();
$(this).parent().siblings().find("ul").slideUp();
$(this).parent().find("ul").slideToggle();
});
});
|