2023.12.2 做一个后台管理网页（左侧边栏实现手风琴和隐藏/出现效果）

本文介绍: 实现功能：（1）实现左侧边栏的手风琴菜单（2）实现左侧边栏的隐藏的显示（3）实现左侧边栏切换按钮的动画效果（4）原生`js`实现的网页，不使用`jquery`和`bootstrap`。

网页源码见附件，比较简单，之前用很多种方法实现过该效果，这次的效果相对更好。
实现功能：
（1）实现左侧边栏的手风琴菜单
（2）实现左侧边栏的隐藏的显示
（3）实现左侧边栏切换按钮的动画效果
（4）原生js实现的网页，不使用jquery和bootstrap。

在这里插入图片描述

手风琴实现的js代码如下，使用循环的方式比较复杂，可以参考另一文的实现方式
2023.12.1 手风琴菜单的简便实现方式
 https://editor.csdn.net/md/?articleId=134759727

        for (i = 0; i &lt; acc.length; i++) {
            acc[i].addEventListener("click", function () {
                var activeAcc = document.querySelector(".accordion.active");
                if (activeAcc &amp;&amp; activeAcc !== this) {
                    activeAcc.classList.remove("active");
                    activeAcc.nextElementSibling.style.display = "none";
                }
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }