Question

说明：：我在菜单栏和子菜单中找到了一个导航栏。我使用javascript来使子菜单在点击时显示

这是我的html

this.material = source.material.clone();
this.geometry = source.geometry.clone();

这是我使用的javascript

<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>

当父级收到激活子菜单的类时，将显示使子菜单出现的CSS

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);
    }   
}

问题：：我想使子菜单显示在悬停上。当我将项目类div悬停时，鼠标悬停起作用，但是当我尝试单击其元素之一时，子菜单消失，因为我没有保持项目div悬停。

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

非常感谢

Answer 1

尝试此代码！，然后根据需要添加样式。

您可以在悬停上添加更多鼠标事件添加类，或者单击由您决定。

'Example1'

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 ;
  
}

使用javascript将鼠标悬停在子菜单上

1 个答案: