jquery - .show () div 之间的跳转问题

Question

我试图为一个网站制作我自己的超级菜单。

<script>
$(document).ready(function() {
    $('#homeDropdown').hide();
    $('#aboutDropdown').hide();

    $("#homeBtn").hover(function () {

    $(".btnDropdown").hide();
    $("#homeDropdown").show("slow");

});


    $("#aboutBtn").hover(function () {
    $(".btnDropdown").hide();
    $("#aboutDropdown").show("slow");
});

$('#homeDropdown').hover(function () {
$("#homeDropdown").show();

}); 

$('#aboutDropdown').hover(function () {
$("#aboutDropdown").show();

}); 
});

</script>

我正在使用以下内容，但是当您浏览“.dropdowns”时它似乎关闭了我是否以正确的方式进行此操作？

http://jsfiddle.net/ma9ic/9Lksq/

Answer 1

为了使它更顺畅，我只是添加了一些检查，以不关闭我们想要打开的窗口。

此外，我添加了隐藏动画，当项目不只是消失时，它更容易让人眼前一亮。

这将使它更平滑：

$(document).ready(function() {

    $('#homeDropdown').hide();
    $('#aboutDropdown').hide();

    $("#homeBtn").hover(function () {
        $(".btnDropdown").not("#homeDropdown").hide("fast");
        $("#homeDropdown").show("slow");
    });


    $("#aboutBtn").hover(function () {
        $(".btnDropdown").not("#aboutDropdown").hide("fast");
        $("#aboutDropdown").show("slow");
    });

    $('#homeDropdown').hover(function () {    
        $("#homeDropdown").show();
    }); 

    $('#aboutDropdown').hover(function () {
        $("#aboutDropdown").show();
    }); 
});

你可以在这里测试它：http: //jsfiddle.net/9Lksq/2/