10.18日记

// 给每个主节点添加点击事件监听器

mainNodes.forEach(mainNode => {

    mainNode.addEventListener('click', (e) => {

        // 阻止默认链接行为

        e.preventDefault();

        // 切换子菜单的显示状态

        const subMenu = mainNode.nextElementSibling;

        subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';

        // 切换主节点的样式以显示展开状态

        mainNode.classList.toggle('active');

        // 隐藏其他子菜单并重置其他主节点的样式

        const otherMainNodes = document.querySelectorAll('.sidebar > ul > li > a');

        otherMainNodes.forEach(node => {

            if (node !== mainNode) {

                node.classList.remove('active');

                node.nextElementSibling.style.display = 'none';

            }

        });

    });

});

// 给子节点添加点击事件监听器

const subNodes = document.querySelectorAll('.sidebar > ul > li > ul > li > a');

// 给子节点添加点击事件监听器

subNodes.forEach(subNode => {

    subNode.addEventListener('click', () => {

        // 移除所有子节点的颜色变化

        subNodes.forEach(node => {

            node.classList.remove('clicked');

        });

        // 添加颜色变化到点击的子节点

        subNode.classList.add('clicked');

    });

});