jquery - 悬停全宽下拉菜单

Question

请看看这个：http: //jsfiddle.net/2bU3R/3/

当我将鼠标悬停在杂志列表上时，第一个下拉菜单不显示。

我希望它适用于许多下拉菜单。

$(document).ready( function(){
    $('#sub-menu-1').hover( function(event){
        event.stopPropagation();
        $(".sub-menu-1-open").slideDown("fast");
    });
    $('.sub-menu-1-open').mouseleave( function(){
        $('.sub-menu-1-open').slideUp("fast");
    });
    $('#sub-menu-2').hover( function(event){
        event.stopPropagation();
        $(".sub-menu-2-open").slideDown("fast");
    });
    $('.sub-menu-2-open').mouseleave( function(){
        $('.sub-menu-2-open').slideUp("fast");
    });
});

Answer 1

演示

利用slideToggle()

$(document).ready( function(){
        $('#sub-menu-1').hover( function(event){
            event.stopPropagation();        
            $(".sub-menu-1-open").slideToggle("fast");  


        });

        $('.sub-menu-1-open').mouseleave( function(){

            $('.sub-menu-1-open').slideToggle("fast");

        });

        $('#sub-menu-2').hover( function(event){

            event.stopPropagation();

            $(".sub-menu-2-open").slideToggle("fast");

        });

        $('.sub-menu-2-open').mouseleave( function(){

            $('.sub-menu-2-open').slideToggle("fast");

        });

});

Answer 2

更新#2

如果您保持现在的 HTML 标记，这应该可以工作。

您所jQuery (Javascript)需要的只是：

$(document).ready(function () {
    $("div[class^='sub-menu'] .inner").mouseleave(function () {
        hideMenu();
    });

    $(".list-inline li a").mouseenter(function () {
        hideMenu();
        $("." + $(this).parent().attr("id") + "-open").stop().slideDown();
    });
});

var hideMenu = function () { 
    $("div[class^='sub-menu']").stop().slideUp();
};

演示：http: //jsfiddle.net/2bU3R/22/

Answer 3

你可以试试这个让它更动态一点：http: //jsfiddle.net/2bU3R/12/

$(document).ready( function(){
    $('.list-inline li').hover(function(){
        var div = $(this).attr('id');
        $('.'+div+'-open').slideToggle('fast');
    });
});

这基本上可以自行运行。