Question

我试图将鼠标悬停更改为点击并已经在线搜索但它仍然不起作用我如何将代码更改为onclick 这样我可以单击并显示下拉菜单？

图案

$* {
box-sizing: border-box;
}
ul {
padding: 0;
}
ul a {
display: inline-block;
text-decoration: none;
color: #ffefc6;
.menu {
max-width: 300px;
margin: 0 auto;
list-style-type: none;
background-color:#333;
font-weight:bold;

效果

$.drop-down {
 position: relative;
 }
 .submenu {
 position: relative;
 opacity: 0;
 width: 100%;
 z-index: 8;
 transition: opacity 0.5s ease;
 }
 .submenu-item {
 display: block;
 height: 0px;
 overflow: hidden;
 transition: height 0.5s ease;
 }
 .drop-down:hover .submenu {
 opacity: 1;
 }
.drop-down:hover .submenu-item {
overflow: visible;
height: 30px;
}

关于html代码

<ul class="menu">
<li class="itembox drop-down">
<a class="item" href="#">Intro</a>
<div class="submenu">
<a class="submenu-item" href="#">Seting　</a>
<a class="submenu-item" href="#">Rule　</a>
<a class="submenu-item" href="#">Mode　</a>
<a class="submenu-item" href="#">Type　</a>
</div>
</li>

Answer 1

您必须使用JavaScript，css无法监听点击事件。

function toggle(id) {
  var elt = document.getElementById(id);
  elt.style.display = elt.style.display=='block' ? 'none' : 'block';
}

.submenu {
  display: none;
}

<ul>
  <li onclick="toggle('submenu-1')">
    Option 1
    <ul id="submenu-1" class="submenu">
      <li>Sub-option 1.1</li>
      <li>Sub-option 1.2</li>
    </ul>
  </li>
  <li onclick="toggle('submenu-2')">
    Option 2
    <ul id="submenu-2" class="submenu">
      <li>Sub-option 2.1</li>
      <li>Sub-option 2.2</li>
    </ul>
  </li>
</ul>

如何在CSS中将鼠标悬停为onclick？

1 个答案: