删除单击其他链接时关闭子菜单的类可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<ul>
<li>
<a href="#" class="menu-link">链接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>
<a href="#" class="menu-link">链接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>
CSS:
.submenu {
display: none;
}
.submenu.open {
display: block;
}
JavaScript:
var menuLinks = document.querySelectorAll('.menu-link');
menuLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
var submenus = document.querySelectorAll('.submenu');
submenus.forEach(function(submenu) {
if (submenu.classList.contains('open')) {
submenu.classList.remove('open');
}
});
var submenu = link.nextElementSibling;
submenu.classList.add('open');
});
});
在上述示例中,我们为每个链接添加了一个名为"menu-link"的类,并为每个子菜单添加了一个名为"submenu"的类。通过JavaScript代码,我们为每个链接添加了一个点击事件监听器,当点击链接时执行相应的操作。在点击事件监听器中,我们首先获取所有的子菜单元素,然后遍历这些子菜单元素,检查是否有打开的子菜单。如果存在打开的子菜单,则移除该类,关闭子菜单。最后,为当前点击的链接所对应的子菜单添加该类,以打开该子菜单。
这样,当点击一个链接时,其他已打开的子菜单将会关闭,只有当前点击的链接所对应的子菜单会打开。
领取专属 10元无门槛券
手把手带您无忧上云