如何解决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 举报,一经查实,本站将立刻删除。