是一个常见的前端开发需求,通常在网页或应用程序的导航菜单中使用。这个功能可以提升用户体验,使界面更加简洁和易于操作。
实现这个功能的方法有很多种,以下是一种常见的实现方式:
<ul class="menu">
<li class="parent">
<a href="#">父级菜单1</a>
<ul class="submenu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li class="parent">
<a href="#">父级菜单2</a>
<ul class="submenu">
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
<li><a href="#">子菜单6</a></li>
</ul>
</li>
</ul>
.submenu {
display: none;
}
.parent.active .submenu {
display: block;
}
var parents = document.querySelectorAll('.parent');
parents.forEach(function(parent) {
parent.addEventListener('click', function() {
// 切换active类
this.classList.toggle('active');
// 隐藏其他父级菜单的子菜单
var siblings = this.parentNode.children;
for (var i = 0; i < siblings.length; i++) {
if (siblings[i] !== this) {
siblings[i].classList.remove('active');
}
}
});
});
这样,当单击一个父级菜单时,它的子菜单会显示出来;当单击另一个父级菜单时,之前显示的子菜单会被隐藏,同时新点击的父级菜单的子菜单会显示出来。
这个功能在各种网站和应用程序中都有广泛的应用,特别是在具有多级导航菜单的复杂界面中。通过合理的设计和交互,可以提升用户对菜单的操作效率和体验。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云