js中怎么用dom垂直折叠菜单

在JavaScript中使用DOM实现垂直折叠菜单的步骤包括：创建HTML结构、编写CSS样式、使用JavaScript操作DOM元素。其中，JavaScript部分可以实现菜单的展开和折叠效果。

一、创建HTML结构

首先，我们需要定义一个基本的HTML结构，其中包含一个垂直菜单。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical Accordion Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu">
        <div class="menu-item">
            <button class="menu-button">Menu 1</button>
            <div class="submenu">
                <a href="#">Submenu 1-1</a>
                <a href="#">Submenu 1-2</a>
                <a href="#">Submenu 1-3</a>
            </div>
        </div>
        <div class="menu-item">
            <button class="menu-button">Menu 2</button>
            <div class="submenu">
                <a href="#">Submenu 2-1</a>
                <a href="#">Submenu 2-2</a>
                <a href="#">Submenu 2-3</a>
            </div>
        </div>
        <!-- Add more menu items as needed -->
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

接下来，编写CSS样式，使菜单看起来更美观，并为子菜单的折叠和展开设置样式。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}
.menu {
    width: 200px;
}
.menu-item {
    border-bottom: 1px solid #ccc;
}
.menu-button {
    background-color: #f1f1f1;
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}
.menu-button:hover {
    background-color: #ddd;
}
.submenu {
    display: none;
    padding-left: 20px;
}
.submenu a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #333;
}
.submenu a:hover {
    background-color: #f1f1f1;
}

三、使用JavaScript操作DOM元素

最后，编写JavaScript代码，通过DOM操作实现菜单的展开和折叠效果。

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var menuButtons = document.querySelectorAll(".menu-button");
    menuButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var submenu = this.nextElementSibling;
            if (submenu.style.display === "block") {
                submenu.style.display = "none";
            } else {
                submenu.style.display = "block";
            }
        });
    });
});

四、扩展功能

1、添加动画效果

为了使菜单的展开和折叠更加平滑，可以使用CSS动画效果。我们可以修改CSS样式如下：

/* styles.css */
.submenu {
    display: none;
    padding-left: 20px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    max-height: 0;
}
.submenu a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #333;
}
.submenu a:hover {
    background-color: #f1f1f1;
}

同时，我们需要调整JavaScript代码以配合CSS动画：

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var menuButtons = document.querySelectorAll(".menu-button");
    menuButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var submenu = this.nextElementSibling;
            if (submenu.style.maxHeight) {
                submenu.style.maxHeight = null;
            } else {
                submenu.style.maxHeight = submenu.scrollHeight + "px";
            }
        });
    });
});

2、管理多个菜单

当有多个菜单项时，可以确保只有一个子菜单处于打开状态。为此，我们需要在每次点击菜单按钮时关闭其他子菜单：

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var menuButtons = document.querySelectorAll(".menu-button");
    menuButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var submenu = this.nextElementSibling;
            menuButtons.forEach(function(btn) {
                var sub = btn.nextElementSibling;
                if (sub !== submenu) {
                    sub.style.maxHeight = null;
                }
            });
            if (submenu.style.maxHeight) {
                submenu.style.maxHeight = null;
            } else {
                submenu.style.maxHeight = submenu.scrollHeight + "px";
            }
        });
    });
});

五、支持嵌套子菜单

如果需要支持嵌套子菜单，可以在HTML结构中增加嵌套的子菜单，并相应地调整CSS样式和JavaScript代码。

<!-- HTML structure -->
<div class="menu-item">
    <button class="menu-button">Menu 1</button>
    <div class="submenu">
        <a href="#">Submenu 1-1</a>
        <div class="menu-item">
            <button class="menu-button">Submenu 1-2</button>
            <div class="submenu">
                <a href="#">Submenu 1-2-1</a>
                <a href="#">Submenu 1-2-2</a>
            </div>
        </div>
        <a href="#">Submenu 1-3</a>
    </div>
</div>

/* styles.css */
.submenu .menu-item {
    padding-left: 20px;
}

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var menuButtons = document.querySelectorAll(".menu-button");
    menuButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var submenu = this.nextElementSibling;
            menuButtons.forEach(function(btn) {
                var sub = btn.nextElementSibling;
                if (sub !== submenu && sub.closest('.submenu') !== submenu) {
                    sub.style.maxHeight = null;
                }
            });
            if (submenu.style.maxHeight) {
                submenu.style.maxHeight = null;
            } else {
                submenu.style.maxHeight = submenu.scrollHeight + "px";
            }
        });
    });
});

通过以上步骤，我们可以在JavaScript中使用DOM实现一个功能齐全的垂直折叠菜单，并根据需要进行扩展和定制。