js竖向折叠二级下拉菜单

基础概念

竖向折叠二级下拉菜单是一种常见的网页导航设计，它允许用户通过点击主菜单项来展开或折叠其子菜单项。这种设计有助于节省页面空间，并提高用户体验。

类型

手风琴式：每次只展开一个子菜单，其他子菜单自动折叠。
多级展开：允许多个子菜单同时展开，适用于复杂的导航结构。

应用场景

企业官网：展示多层次的服务和产品分类。
电商网站：分类浏览商品时提供清晰的导航路径。
管理后台：管理员操作界面，需要快速访问多个功能模块。

示例代码

以下是一个简单的JavaScript实现竖向折叠二级下拉菜单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Accordion Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .menu {
            width: 200px;
        }
        .menu-item {
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
        .submenu {
            display: none;
            padding-left: 20px;
        }
        .submenu.open {
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-item" onclick="toggleSubmenu(this)">
            Menu 1
            <div class="submenu">
                <a href="#">Submenu 1.1</a>
                <a href="#">Submenu 1.2</a>
            </div>
        </div>
        <div class="menu-item" onclick="toggleSubmenu(this)">
            Menu 2
            <div class="submenu">
                <a href="#">Submenu 2.1</a>
                <a href="#">Submenu 2.2</a>
            </div>
        </div>
    </div>

    <script>
        function toggleSubmenu(menuItem) {
            const submenu = menuItem.querySelector('.submenu');
            submenu.classList.toggle('open');
        }
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：子菜单展开后无法折叠

原因：可能是JavaScript代码中切换类名的逻辑有问题。

解决方法：确保toggleSubmenu函数正确地切换了.open类。

function toggleSubmenu(menuItem) {
    const submenu = menuItem.querySelector('.submenu');
    submenu.classList.toggle('open');
}

问题2：点击子菜单项时，子菜单自动折叠

原因：点击事件冒泡导致父元素的事件也被触发。

解决方法：在子菜单项上阻止事件冒泡。

<div class="submenu">
    <a href="#" onclick="event.stopPropagation()">Submenu 1.1</a>
    <a href="#" onclick="event.stopPropagation()">Submenu 1.2</a>
</div>

通过以上方法，可以有效实现和管理竖向折叠二级下拉菜单的功能。