我有一个简单的CSS驱动下拉菜单。我使用jQuery通过点击'来切换下拉列表。或者'悬停。'但是,如果点击"菜单"两次(显示,然后再次隐藏),悬停状态变为禁用状态。在这种情况下,有没有人知道使用悬停状态返回切换的方法?
非常感谢!
HTML
<ul class="menu">
<li> <a class="trigger">MENU</a>
<ul class="dropdown">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
CSS
.menu, .menu ul {
list-style:none;
cursor:pointer;
margin:0;
padding:0;
}
.menu a {
float:left;
text-decoration:none;
color:#000;
}
.menu li:hover > a {
color:#666;
}
.menu ul {
opacity:0;
visibility:hidden;
position:absolute;
top:25px;
z-index:1;
background:#666;
}
.menu li:hover > ul {
opacity:1;
visibility:visible;
}
.menu ul a {
padding:5px;
display:block;
text-transform:none;
}
.menu ul a:hover {
background-color:lightgray;
}
的jQuery
$('.trigger').on("click hover", function() {
$('.dropdown').toggle();
});
答案 0 :(得分:1)
它不在这里,但我确定你已经在这行代码中加入了CSS:
.trigger:hover .dropdown {
display: block;
}
我建议你将它添加到你的CSS中。
.trigger:hover .dropdown,
.trigger.clicked .dropdown {
display: block;
}
这会显示您悬停此<li>
时以及clicked
课程时的菜单。
然后,你必须添加这行javascript:
var timeoutMenu = null;
$('.trigger').on("click", function() {
$('.dropdown').toggleClass('active');
});
$('.trigger').hover(function() {
clearTimeout(timeoutMenu);
$('.dropdown').toggleClass('active');
}, function() {
setTimeout(function() {
$('.dropdown').removeClass('active');
}, 500);
});
当您将鼠标悬停在菜单上时,会显示其子菜单,当您将鼠标输出时,该菜单会隐藏500毫秒。
希望它有所帮助。
问候。