很多拍賣網站會看到 header 選單，點擊項目按鈕後，才會出現子選單，這次來筆記一下。
HTML 架構
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="dropdownMenu">
<ul>
<li><a href="#">產品一</a></li>
<li><a href="#">產品二</a></li>
<li><a href="#" class="btn jq-clickBtn">請點我</a>
<ul class="dropdownList jq-dropdown">
<li><a href="#">商品一</a></li>
<li><a href="#">商品二</a></li>
<li><a href="#">商品三</a></li>
</ul>
</li>
</ul>
</div>
|
在第三個 li 中放入子選單，把要控制的地方另外加入 className，讓 CSS 與 jQuery 分開管理，因為一開始 dropdownList 要隱藏，所以 CSS 要設定 display:none;，並增加一個 .active ，等等要透過 jQuery 來動態增加 class。
1
2
3
4
5
6
7
8
9
10
11
12
| .dropdownList {
display: none;
li {
display: flex;
justify-content: center;
align-items: center;
// flex-direction: column;
}
}
&.active {
display: block;
}
|
jQuery 行為
綁定按鈕，並且給予 click 事件，點擊按鈕時動態增加 .active，並且使 dropdownList 產生收合功能。
1
2
3
4
5
6
7
| $(function () {
$('.jq-clickBtn').click(function (e) {
e.preventDefault();
$('.jq-clickBtn').toggleClass('active');
$('.jq-dropdown').slideToggle();
});
});
|