JS动态加载显示多级菜单

实现JS动态加载和显示多级菜单涉及到几个关键步骤，包括HTML结构的设计、事件处理和DOM操作。以下是一个详细的示例：

HTML结构

首先，定义一个简单的HTML结构，用于显示多级菜单：

html
复制代码
<div id="menu">
    <ul id="menu-list">
        <li><a href="#">Menu Item 1</a>
            <ul>
                <li><a href="#">Submenu Item 1.1</a></li>
                <li><a href="#">Submenu Item 1.2</a></li>
                <li><a href="#">Submenu Item 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 2</a>
            <ul>
                <li><a href="#">Submenu Item 2.1</a></li>
                <li><a href="#">Submenu Item 2.2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS样式

为菜单项和子菜单项添加基本的样式，使其具有合适的外观和排列方式。

css
复制代码
#menu ul {
    list-style-type: none;
    padding: 0;
}

#menu ul li {
    display: inline-block;
    position: relative;
}

#menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}

#menu ul li:hover > ul {
    display: block;
}

JavaScript动态加载

使用JavaScript来处理菜单的动态加载和显示效果：

javascript
复制代码
// 获取所有一级菜单项
const topLevelMenuItems = document.querySelectorAll('#menu-list > li');

// 遍历每个一级菜单项
topLevelMenuItems.forEach(item => {
    // 找到每个一级菜单项下的子菜单
    const subMenu = item.querySelector('ul');
    if (subMenu) {
        // 当鼠标悬停在菜单项上时显示子菜单
        item.addEventListener('mouseenter', () => {
            subMenu.style.display = 'block';
        });
        // 当鼠标离开菜单项时隐藏子菜单
        item.addEventListener('mouseleave', () => {
            subMenu.style.display = 'none';
        });
    }
});

实现说明

• HTML结构：使用嵌套的<ul>和<li>元素定义多级菜单的层次结构。
• CSS样式：使用CSS样式控制菜单项的布局和显示效果，包括悬停时显示子菜单。
• JavaScript动态加载：使用JavaScript监听菜单项的鼠标悬停事件，动态显示和隐藏对应的子菜单。

通过这些步骤，您可以在网页中实现动态加载和显示多级菜单，提升用户体验并优化导航结构。

关键字提取

JS动态加载,显示多级菜单,HTML结构,CSS样式,JavaScript动态显示,菜单项事件