使用 Javascript 在点击时显示 div

Question

到目前为止可以管理我想要为我的超级菜单实现的目标。 现在的问题是，我忘记了触摸屏不能真正用于悬停。 因此，大型菜单出现在 JavaScript 悬停时。 触发div的菜单项是WordPress/theme的默认菜单。 我知道我可以用 JavaScript 按钮来完成。 但是是否有可能使用特定的默认菜单“span” li id="menu-item-136"来实现这一点，就像我使用 JavaScript 实现了其余的大型菜单样式一样？ 向该跨度添加单击选项？ 那很好啊！ 这是到目前为止的代码：

 //Showing mega menu on hover over menu point document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver); document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementById("mega-menu").style.display = "block"; } function mouseOut() { document.getElementById("mega-menu").style.display = "none"; } //Let mega menu stay visible when hovering over it //Style menupoint when hovering over mega menu div document.getElementById("mega-menu").addEventListener("mouseover", mouseOver); document.getElementById("mega-menu").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementById("mega-menu").style.display = "block"; var labels = document.getElementsByClassName("aux-menu-label"); for (var i = 0; i < labels.length; i++) { labels[0].style.color = "yellow" } } function mouseOut() { document.getElementById("mega-menu").style.display = "none"; var labels = document.getElementsByClassName("aux-menu-label"); for (var i = 0; i < labels.length; i++) { labels[i].style.color = "blue" } }

 .menu-item-136 { background-color: grey; height: 50px; } .menu-item-136:hover { background-color: green; } .aux-menu-label { color: blue; } .mega-menu-1 { display: none; background-color: green; height: 200px; }

 <div> <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item"> <a href="#" class="aux-item-content"> <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span> <span class="aux-submenu-indicator"></span></a> </div> <div id="mega-menu" class="mega-menu-1">content</div>

谢谢你的帮助！ :)

Answer 1

当然@Artan

 document.getElementById('menu-item-136').addEventListener('click',function(){ document.getElementsByClassName("aux-menu-label")[0].style.backgroundColor = 'yellow'; });

 <div> <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item"> <a href="#" class="aux-item-content"> <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span> <span class="aux-submenu-indicator"></span></a> </div>