当您将鼠标悬停在“菜单项”上时，您将看到带有值列表的下拉菜单。 1) “子菜单项 1” 2) “子菜单项 2”
我想在单击子菜单列表时删除悬停。有什么办法可以实现吗？
function testFunc() {
//remove hover
}nav ul {
background: #ddd;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
min-width: 33%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' \25bc';
}
nav li ul {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
width: 100%;
}<nav>
<ul class="cf">
<li><a class="dropdown" href="#">Menu Item</a>
<ul>
<li onClick="testFunc()"><a href="#">Sub-menu Item 1</a></li>
<li onClick="testFunc()"><a href="#">Sub-menu Item 2</a></li>
</ul>
</li>
</ul>
</nav>fiddle :https://jsfiddle.net/2erxyz7x/
最佳答案
这对我有用(在 Chrome 和 FF 中)
function testFunc() {
var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
}
对 HTML 稍作改动:
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">Menu Item</a>
<ul>
<li onclick="testFunc()" class="item"><a href="#">Sub-menu Item 1</a></li>
<li onclick="testFunc()" class="item"><a href="#">Sub-menu Item 2</a></li>
</ul>
</li>
</ul>
</nav>
以下是 HTML 页面的完整代码:
<html>
<head>
<script>
function testFunc() {
var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
}
</script>
<style>
nav ul {
background: #ddd;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
min-width: 33%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' \25bc';
}
nav li ul {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
width: 100%;
}
</style>
</head>
<body>
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">Menu Item</a>
<ul>
<li onclick="testFunc()" class="item"><a href="#">Sub-menu Item 1</a></li>
<li onclick="testFunc()" class="item"><a href="#">Sub-menu Item 2</a></li>
</ul>
</li>
</ul>
</nav>
<input id='test' type="text" />
</body>
关于javascript - 单击下拉列表中的值列表时删除悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48574775/