使用 Javascript 使 div 在点击时出现

Question

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

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

使用 Javascript 使 div 在点击时出现

Make div appear on click with Javascript

javascript

menu

onclick

touch

megamenu