三级菜单怎么写js

三级菜单的实现通常涉及到动态显示和隐藏子菜单、事件处理，以及一定的样式控制。 在JavaScript中，使用事件监听器、DOM操作和CSS类来管理这些功能是常见的方法。以下是一个详细的实现方法。

一、定义HTML结构

首先，我们需要定义一个基本的HTML结构。这个结构应该包括一个包含所有菜单项的顶级容器，以及每个菜单项的子菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu">
        <ul>
            <li>一级菜单1
                <ul class="submenu">
                    <li>二级菜单1-1
                        <ul class="submenu">
                            <li>三级菜单1-1-1</li>
                            <li>三级菜单1-1-2</li>
                        </ul>
                    </li>
                    <li>二级菜单1-2
                        <ul class="submenu">
                            <li>三级菜单1-2-1</li>
                            <li>三级菜单1-2-2</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>一级菜单2
                <ul class="submenu">
                    <li>二级菜单2-1
                        <ul class="submenu">
                            <li>三级菜单2-1-1</li>
                            <li>三级菜单2-1-2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、添加CSS样式

为了使菜单在视觉上更具吸引力并且有层次感，我们需要为其添加一些CSS样式。特别是控制子菜单的显示和隐藏。

/* styles.css */
.menu {
    font-family: Arial, sans-serif;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    position: relative;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 1000;
}
li:hover > .submenu {
    display: block;
}

三、添加JavaScript逻辑

接下来，我们需要编写JavaScript代码来处理菜单的交互功能。主要包括鼠标悬停显示子菜单、鼠标移出隐藏子菜单等。

// script.js
document.addEventListener('DOMContentLoaded', function () {
    const menuItems = document.querySelectorAll('.menu > ul > li');
    menuItems.forEach(function (menuItem) {
        menuItem.addEventListener('mouseenter', function () {
            const submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'block';
            }
        });
        menuItem.addEventListener('mouseleave', function () {
            const submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
            }
        });
    });
});

四、解释和细节展开

1. HTML结构： 每个菜单项都是一个<li>元素，子菜单使用嵌套的<ul>。这种结构使得菜单层次分明，便于用CSS控制样式和用JavaScript操作DOM。

2. CSS样式：

隐藏子菜单： 使用display: none隐藏所有子菜单。
显示子菜单： 使用:hover伪类，当鼠标悬停在父菜单项上时，显示子菜单。
位置控制： 使用position: absolute将子菜单定位在父菜单项的下方。

3. JavaScript逻辑：

事件监听： 使用mouseenter和mouseleave事件监听器，控制子菜单的显示和隐藏。
动态显示： 当鼠标进入父菜单项时，显示子菜单；当鼠标离开时，隐藏子菜单。

五、进一步优化

为了增强用户体验，可以考虑添加一些动画效果，使菜单的显示和隐藏更加流畅。例如，可以使用CSS的transition属性来实现淡入淡出效果。

/* styles.css */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease;
}
li:hover > .submenu {
    display: block;
    opacity: 1;
}

六、总结

三级菜单的实现需要结合HTML、CSS和JavaScript的多种技术， 通过合理的结构和样式控制，配合事件处理，实现用户友好的交互体验。无论是为了提高网站的导航功能，还是增强用户体验，三级菜单都是一种非常实用的设计模式。