js多级下拉菜单怎么做

多级下拉菜单在JavaScript中的实现方法可以通过以下几步来完成：使用HTML创建菜单结构、使用CSS进行样式设计、使用JavaScript添加交互功能。其中，JavaScript代码的编写是实现多级下拉菜单的关键，在代码中，我们可以使用事件监听器来实现菜单的展开和收起。

一、HTML结构

首先，我们需要创建一个基本的HTML结构来表示多级下拉菜单。下面是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-level Dropdown Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Services</a>
                <ul class="submenu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Development</a></li>
                    <li>
                        <a href="#">SEO</a>
                        <ul class="submenu">
                            <li><a href="#">On-page SEO</a></li>
                            <li><a href="#">Off-page SEO</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来，我们需要为多级下拉菜单添加一些基本的样式，以便其能够正确显示和隐藏。以下是一个简单的CSS样式示例：

/* styles.css */
body {
    font-family: Arial, sans-serif;
}
nav {
    background-color: #333;
    overflow: hidden;
}
.menu, .submenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.menu > li {
    float: left;
    position: relative;
}
.menu > li > a {
    display: block;
    padding: 14px 20px;
    color: white;
    text-decoration: none;
}
.menu > li > a:hover {
    background-color: #575757;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
}
.submenu > li > a {
    padding: 10px 20px;
    color: white;
    text-decoration: none;
}
.submenu > li > a:hover {
    background-color: #575757;
}
.menu > li:hover > .submenu {
    display: block;
}

三、JavaScript交互

最后，我们需要使用JavaScript来实现菜单的展开和收起功能。以下是一个简单的JavaScript示例：

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

四、优化JavaScript代码

在前面的例子中，我们使用了简单的mouseover和mouseout事件来控制子菜单的显示和隐藏。但在实际应用中，我们通常希望菜单在点击时展开，并在点击其他地方时收起。下面是一个更复杂的例子，展示如何实现这一点：

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var menuItems = document.querySelectorAll('.menu > li');
    menuItems.forEach(function (menuItem) {
        menuItem.addEventListener('click', function (event) {
            event.stopPropagation();
            // 关闭其他打开的子菜单
            menuItems.forEach(function (item) {
                if (item !== menuItem) {
                    var openSubmenu = item.querySelector('.submenu');
                    if (openSubmenu) {
                        openSubmenu.style.display = 'none';
                    }
                }
            });
            // 切换当前子菜单的显示状态
            var submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
    // 点击页面其他地方时关闭所有子菜单
    document.addEventListener('click', function () {
        menuItems.forEach(function (menuItem) {
            var submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
            }
        });
    });
});

五、多级菜单的无障碍性

在设计和实现多级下拉菜单时，我们还需要考虑到无障碍性（Accessibility）。确保菜单对于所有用户都能正常使用，包括那些依赖屏幕阅读器或键盘导航的用户。以下是一些改进建议：

使用WAI-ARIA属性：为菜单项添加适当的ARIA属性，以便屏幕阅读器能够正确解释菜单结构。
键盘导航：确保用户可以使用键盘导航菜单，通常包括使用Tab键在菜单项之间移动，并使用Enter或Space键展开子菜单。

<!-- HTML with WAI-ARIA attributes -->
<nav>
    <ul class="menu" role="menubar">
        <li role="none"><a href="#" role="menuitem">Home</a></li>
        <li role="none">
            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">Services</a>
            <ul class="submenu" role="menu">
                <li role="none"><a href="#" role="menuitem">Web Design</a></li>
                <li role="none"><a href="#" role="menuitem">Development</a></li>
                <li role="none">
                    <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">SEO</a>
                    <ul class="submenu" role="menu">
                        <li role="none"><a href="#" role="menuitem">On-page SEO</a></li>
                        <li role="none"><a href="#" role="menuitem">Off-page SEO</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li role="none"><a href="#" role="menuitem">Contact</a></li>
    </ul>
</nav>

// script.js with keyboard navigation
document.addEventListener('DOMContentLoaded', function () {
    var menuItems = document.querySelectorAll('.menu > li');
    menuItems.forEach(function (menuItem) {
        var link = menuItem.querySelector('a');
        link.addEventListener('click', function (event) {
            event.stopPropagation();
            event.preventDefault();
            // 切换ARIA属性
            var expanded = link.getAttribute('aria-expanded') === 'true';
            link.setAttribute('aria-expanded', !expanded);
            // 显示或隐藏子菜单
            var submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = expanded ? 'none' : 'block';
            }
        });
        link.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                link.click();
            }
        });
    });
    document.addEventListener('click', function () {
        menuItems.forEach(function (menuItem) {
            var link = menuItem.querySelector('a');
            var submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
                link.setAttribute('aria-expanded', 'false');
            }
        });
    });
});

通过上述步骤，我们可以实现一个多级下拉菜单，其不仅具有良好的用户体验，还考虑了无障碍性，确保所有用户都能方便地使用该菜单。