如何解决使用HTML,CSS和JavaScript处理移动多级导航菜单的通用方法
我的html如下:
<button id="hamburger-nav"></button>
<nav>
<ul>
<li>
<button>Sub Nav Item 1</button>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li>
<button>Sub Nav Item 2</button>
<ul>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
</li>
<ul>
</nav>
这是一个带有汉堡按钮的移动菜单,该按钮可在单击时激活“导航”。如何获取子导航按钮的索引,以便可以激活其同级的“ ul”子子菜单?因为这是一个移动菜单,所以所有这些都必须在onclick方法上完成。
我希望有一个通用的方法,该方法可以找到(this)的索引,即被单击的项目,然后获得相应的“ ul”,而不是单独命名它们并创建大量重复的每个菜单部分的代码。
我想使用普通的旧JavaScript,因为我想减少jQuery等的依赖关系。
var menuButtons = document.querySelectorAll("nav > ul > li > button");
var submenu = document.querySelectorAll("nav > ul > li > ul");
menuButtons.onclick = myFunction(this);
function myFunction(v) {
submenu[v].classList.add("open");
}
虽然我知道JavaScript无法使用,但是访问按钮的索引并打开其随附的导航栏是我的思考过程。但是也许我正在解决这个问题。 预先谢谢你!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。