原生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>