js制作折叠菜单栏

要在JavaScript中制作一个折叠菜单栏，你需要结合HTML和CSS来完成。以下是一个简单的示例：

HTML结构:

<ul class="menu">
    <li>
        <a href="#">菜单1</a>
        <ul class="submenu">
            <li><a href="#">子菜单1-1</a></li>
            <li><a href="#">子菜单1-2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">菜单2</a>
        <ul class="submenu">
            <li><a href="#">子菜单2-1</a></li>
            <li><a href="#">子菜单2-2</a></li>
        </ul>
    </li>
</ul>

CSS样式:

.menu, .submenu {
    list-style-type: none;
    padding: 0;
}

.menu > li {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.submenu li {
    width: 100%;
}

.submenu li a {
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    color: black;
}

.submenu li a:hover {
    background-color: #f1f1f1;
}

JavaScript交互:

document.addEventListener('DOMContentLoaded', function() {
    var menuItems = document.querySelectorAll('.menu > li');

    menuItems.forEach(function(menuItem) {
        menuItem.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡
            var submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });

    // 点击页面其他地方关闭菜单
    document.addEventListener('click', function() {
        var submenus = document.querySelectorAll('.submenu');
        submenus.forEach(function(submenu) {
            submenu.style.display = 'none';
        });
    });
});

基础概念: