Question

我正在尝试为网站制作自己的Mega菜单。

<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/

.show（）跳转div之间的问题

1 个答案: