javascript - 使用 javascript 在悬停时保持子菜单打开

Question

描述：我有一个导航栏，里面有我的菜单和子菜单。我使用 javascript 使子菜单在点击时出现

这是我的html

<ul class="menu grid-x">
  <div class="logo align-self-middle">
    <a href="#">LOGO</a>
  </div>
  <li class="item has-submenu align-self-middle grid-x align-middle">
    <a tabindex="0">Société</a>
    <ul class="submenu">
      <li class="subitem text-left"><a href="#">Présentation</a></li>
      <li class="subitem text-left"><a href="#">Nous rejoindre</a></li>
      <li class="subitem has-submenu text-left"><a tabindex="0">Nos agences</a></li>
      <li class="subitem text-left"><a href="#">Nos actualités</a></li>
    </ul>
  </li>
  <li class="item has-submenu align-self-middle">
    <a tabindex="0">Téléphonie</a>
    <ul class="submenu">
      <li class="subitem text-left"><a href="#">Téléphonie entreprise</a></li>
      <li class="subitem text-left"><a href="#">Flotte mobile</a></li>
      <li class="subitem text-left"><a href="#">Communications unifiées</a></li>
      <li class="subitem text-left"><a href="#">Centre de contact virtuel</a></li>
      <li class="subitem text-left"><a href="#">Centre de contact Multicanal</a></li>
    </ul>
  </li>
 <ul>

这是我使用的 javascript

const items = document.querySelectorAll(".item");
const menu = document.querySelector(".menu");
 
/* Activate Submenu */
function toggleItem() {
  if (this.classList.contains("submenu-active")) {
    this.classList.remove("submenu-active");
  } else if (menu.querySelector(".submenu-active")) {
    menu.querySelector(".submenu-active").classList.remove("submenu-active");
    this.classList.add("submenu-active");
  } else {
    this.classList.add("submenu-active");
  }
}
 
/* Event Listeners */
for (let item of items) {
    if (item.querySelector(".submenu")) {
      item.addEventListener("click", toggleItem, false);
      item.addEventListener("keypress", toggleItem, false);
    }   
}

当父级接收到 submenu-active 类时，使子菜单出现的 CSS

submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
}

问题：我想让子菜单出现在悬停时。当我悬停项目类 div 时，鼠标悬停有效，但是当我尝试单击其中一个元素时，子菜单消失，因为我没有维护项目 div 悬停。

我不想使用 jquery，也想不出解决方案。任何人都可以帮忙吗？

非常感谢

标签： javascripthovermouseoversubmenu

Answer 1

试试这个代码！并根据需要添加样式。

您可以在悬停或单击时包含更多鼠标事件添加类由您决定。

const items = document.querySelectorAll(".item");
const menu = document.querySelector(".menu");
 
items.forEach(item => { 
   item.addEventListener('click', function() {
   
     if ( !item.classList.contains("show") ){
            item.classList.add("show")
        }else {
          item.classList.remove("show")
        }
  })
})

.has-submenu {
position: relative; }
.submenu {
display: none;
  background-color: #ffffff;
  position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    
  }
  
.has-submenu.show .submenu {
    display: block ;
  
}

<ul class="menu grid-x">
  <div class="logo align-self-middle">
    <a href="#">LOGO</a>
  </div>
  <li class="item has-submenu align-self-middle grid-x align-middle  ">
    <a tabindex="0">Société</a>
    <ul class="submenu ">
      <li class="subitem text-left"><a href="#">Présentation</a></li>
      <li class="subitem text-left"><a href="#">Nous rejoindre</a></li>
      <li class="subitem has-submenu text-left"><a tabindex="0">Nos agences</a></li>
      <li class="subitem text-left"><a href="#">Nos actualités</a></li>
    </ul>
  </li>
  <li class="item has-submenu align-self-middle">
    <a tabindex="0">Téléphonie</a>
    <ul class="submenu">
      <li class="subitem text-left"><a href="#">Téléphonie entreprise</a></li>
      <li class="subitem text-left"><a href="#">Flotte mobile</a></li>
      <li class="subitem text-left"><a href="#">Communications unifiées</a></li>
      <li class="subitem text-left"><a href="#">Centre de contact virtuel</a></li>
      <li class="subitem text-left"><a href="#">Centre de contact Multicanal</a></li>
    </ul>
  </li>
 <ul>