要使用jQuery實現下拉菜單的多級展開,首先確保已經在HTML文件中引入了jQuery庫。然后,可以通過以下步驟實現多級展開功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 多級下拉菜單</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
}
.sub-menu {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>菜單1
<ul class="sub-menu">
<li>子菜單1-1</li>
<li>子菜單1-2</li>
<li>子菜單1-3</li>
</ul>
</li>
<li>菜單2
<ul class="sub-menu">
<li>子菜單2-1</li>
<li>子菜單2-2</li>
</ul>
</li>
<li>菜單3</li>
</ul>
<script>
// 在這里編寫jQuery代碼
</script>
</body>
</html>
$(document).ready(function() {
// 當點擊一級菜單時,展開對應的子菜單
$('li').on('click', function() {
// 隱藏所有子菜單
$('.sub-menu').hide();
// 獲取當前點擊的一級菜單的子菜單
var subMenu = $(this).find('.sub-menu');
// 如果子菜單存在,則展開子菜單
if (subMenu.length > 0) {
subMenu.show();
}
});
// 當點擊子菜單時,阻止事件冒泡,以免觸發一級菜單的點擊事件
$('.sub-menu').on('click', function(event) {
event.stopPropagation();
});
});
現在,當點擊一級菜單時,對應的子菜單將展開。點擊子菜單時,不會展開其他子菜單。這樣就實現了使用jQuery實現的下拉菜單多級展開功能。