我想让mouseleave上的下拉菜单消失。在我悬停在li上之后,下拉显示并且即使它没有悬停也只是停留在那里。我已将mouseleave
添加到#nav > li > a
,但它会使下拉列表消失,但不会使其仅在mouseleave上消失。那我怎么解决这个问题呢?我认为问题在于jquery方面。
这是一个小提琴http://jsfiddle.net/RXRBm/8/
的JavaScript
$(document).ready(function () {
$("#nav > li > a").on('mouseenter', function (e) {
if ($(this).parent().has("ul")) {
e.preventDefault();
}
if (!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
} else if ($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
CSS
li {
list-style:none;
}
#nav {
float: left;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li {
position:relative;
}
#nav li a {
width: 200px;
display: block;
padding: 10.7px;
background:#ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
border-width:0.2px;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none;
position:absolute;
left:181px;
top:-1px;
}
#nav li ul li a {
padding: 10px;
background:#C01F25;
opacity:0.95;
border-bottom: 0.1px solid red;
}
答案 0 :(得分:1)
$("#nav>li").on('mouseleave',function(){
$(this).children().eq(1).hide();
});