JavaScript 中的默认折叠菜单

问题描述

我做了一个带有关闭/打开按钮的左侧菜单。 它工作正常，但我希望菜单被默认折叠。我该怎么做？

const menuLinks = document.querySelectorAll(".admin-menu a");
const collapseBtn = document.querySelector(".admin-menu .collapse-btn");
const toggleMobileMenu = document.querySelector(".toggle-mob-menu");
const collapsedClass = "collapsed";

collapseBtn.addEventListener("click",function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded","false")
    : this.setAttribute("aria-expanded","true");
  this.getAttribute("aria-label") == "collapse menu"
    ? this.setAttribute("aria-label","expand menu")
    : this.setAttribute("aria-label","collapse menu");
  body.classList.toggle(collapsedClass);
}); 

HTML：

<header class="page-header" data-toggle="collapse">
  <nav>
    <ul class="admin-menu">
      <li class="menu-heading">
        <h3>Left menu</h3>
      </li>
      <li>
        <a href="dashboard.PHP">
  
          <span>Dashboard</span>
        </a>
      </li>
      <li class="menu-heading">
      </li>
      <li>
        <a href="upload.PHP">
          <span>Upload</span>
        </a>
      </li>
      <li>
        <a href="userlist.PHP">
          <span>User list</span>
        </a>
      </li>
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="collapse menu">
          <svg aria-hidden="true">
            <use xlink:href="#collapse"></use>
          </svg>
          <span></span>
        </button>
      </li>
    </ul>
  </nav>
</header>

我尝试替换“true”和“false”语句，但没有成功:,D

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）