时间戳

首页 > 解决方案 > 无法在 javascript/html 中折叠子菜单

javascript - 无法在 javascript/html 中折叠子菜单

问题描述

https://jsfiddle.net/g8u1mw5d/8/

我的 html/css 和 javascript 在这里。

我需要在设置图标下方放置一些子菜单/子链接。但是当我点击它时，什么也没有发生，子菜单下拉菜单也没有。我该如何解决？我究竟做错了什么？我在网上得到了这段代码，其他一切都很好，但折叠部分的 javascript 代码不起作用。

const linkCollapse = document.getElementsByClassName('collapse__link')
  var i
  
  for(i=0;i<linkCollapse.length;i++){
    linkCollapse[i].addEventListener('click', function(){
      const collapseMenu = this.nextElementSibling
      collapseMenu.classList.toggle('showCollapse')
  
      const rotate = collapseMenu.previousElementSibling
      rotate.classList.toggle('rotate')

<a href="#" class="nav__link">
                      <ion-icon name="settings-outline" class="nav__icon"></ion-icon>
                      <span class="nav__name">Settings</span>
                      <ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>

                      <ul class="collapse__menu">
                          <a href="#" class="collapse__sublink">Data</a>
                          <a href="#" class="collapse__sublink">Group</a>
                          <a href="#" class="collapse__sublink">Members</a>
                      </ul>

标签： javascripthtml

解决方案

推荐阅读