原生js 多级菜单

原生JavaScript实现多级菜单通常涉及到DOM操作、事件处理以及可能的递归逻辑。以下是关于原生JS多级菜单的基础概念、优势、类型、应用场景以及常见问题的解答：

基础概念

多级菜单指的是具有多级嵌套结构的菜单系统，用户可以通过点击或悬停等方式展开或收起子菜单。

优势

灵活性高：原生JS实现的多级菜单可以根据需求进行高度定制。
性能优化：避免了引入额外的库或框架，减少页面加载时间。
兼容性好：适用于各种浏览器环境。

类型

点击展开式：用户点击菜单项后展开子菜单。
悬停展开式：用户将鼠标悬停在菜单项上时展开子菜单。

应用场景

多级菜单常用于网站导航、后台管理系统等需要展示多层次结构信息的场景。

实现示例（点击展开式）

<ul id="menu">
    <li>
        菜单项1
        <ul class="submenu">
            <li>子菜单项1-1</li>
            <li>子菜单项1-2</li>
        </ul>
    </li>
    <li>
        菜单项2
        <ul class="submenu">
            <li>子菜单项2-1</li>
            <li>
                子菜单项2-2
                <ul class="submenu">
                    <li>子菜单项2-2-1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('#menu > li');

    menuItems.forEach(function(item) {
        item.addEventListener('click', function(event) {
            event.stopPropagation(); // 阻止事件冒泡
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
});
</script>

常见问题及解决方法

子菜单无法正常展开/收起：
- 确保事件监听器正确绑定到菜单项上。
- 使用event.stopPropagation()阻止事件冒泡，避免触发父元素的事件处理程序。
- 检查CSS样式，确保子菜单的初始状态和显示/隐藏逻辑正确。

菜单在移动设备上不友好：
- 考虑使用媒体查询（Media Queries）来调整菜单在不同屏幕尺寸下的布局。
- 实现响应式设计，使菜单在移动设备上能够以更适合的方式展示，如汉堡菜单等。
菜单动画效果不流畅：
- 使用CSS过渡（Transitions）或动画（Animations）来实现平滑的展开和收起效果。
- 优化JavaScript代码，减少DOM操作，提高性能。

通过原生JavaScript实现多级菜单需要一定的DOM操作和事件处理知识，但可以根据具体需求进行高度定制，提供良好的用户体验。