-1

我想让下拉菜单在鼠标离开时消失。在我将鼠标悬停在 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;
}
4

1 回答 1

1

演示

$("#nav>li").on('mouseleave',function(){       
   $(this).children().eq(1).hide();
});
于 2013-08-23T05:40:44.260 回答