Question

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

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

$(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

<强> Demo

使用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');
    });
});

这基本上可以自行运行。

悬停全宽下拉菜单

3 个答案: