首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何删除单击其他链接时关闭子菜单的类

删除单击其他链接时关闭子菜单的类可以通过以下步骤实现:

  1. 首先,需要为子菜单添加一个类,用于标识该子菜单。
  2. 在HTML中,为每个链接添加一个点击事件监听器,当点击链接时执行相应的操作。
  3. 在点击事件监听器中,首先获取所有的子菜单元素。
  4. 遍历所有的子菜单元素,检查是否有打开的子菜单(即是否存在已添加的类)。
  5. 如果存在打开的子菜单,则移除该类,关闭子菜单。
  6. 最后,为当前点击的链接所对应的子菜单添加该类,以打开该子菜单。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<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:

代码语言:txt
复制
.submenu {
  display: none;
}

.submenu.open {
  display: block;
}

JavaScript:

代码语言:txt
复制
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代码,我们为每个链接添加了一个点击事件监听器,当点击链接时执行相应的操作。在点击事件监听器中,我们首先获取所有的子菜单元素,然后遍历这些子菜单元素,检查是否有打开的子菜单。如果存在打开的子菜单,则移除该类,关闭子菜单。最后,为当前点击的链接所对应的子菜单添加该类,以打开该子菜单。

这样,当点击一个链接时,其他已打开的子菜单将会关闭,只有当前点击的链接所对应的子菜单会打开。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券