1

サイト用に独自のメガ メニューを作成しようとしています。

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

4

1 に答える 1

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/

于 2013-03-11T17:22:46.937 に答える