在網站開發中,樹形菜單是一個常見的功能需求。HTML和JS樹形菜單代碼可以幫助我們快速地實現樹形菜單的設計。在HTML中,我們可以使用ul和li標簽來構建菜單的層次結構。在JS中,我們可以使用DOM來動態地修改菜單的樣式以及添加或刪除菜單項。
// 創建樹形菜單的HTML結構
// 使用JS添加點擊事件
var menu = document.getElementById('myMenu');
menu.addEventListener('click', function(event) {
var target = event.target;
// 判斷是否是有子菜單的菜單項
if (target.tagName === 'LI' && target.children.length >0) {
// 切換子菜單的顯示與隱藏
var subMenu = target.children[0];
subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';
}
});
上述代碼中,我們使用了HTML的ul和li標簽來構建了一個樹形菜單。其中,有一個li標簽包含了另一個ul標簽,所以它成為了一個帶有子菜單的菜單項。通過JS,我們為樹形菜單添加了事件監聽器來動態地切換子菜單的顯示與隱藏。