0

jqueryマウスホバーイベントを介して表示されるドロップダウンボックスと、元のドロップダウンボックスの要素にカーソルを合わせると表示されるネストされたドロップダウンボックスを作成する方法を考え出そうとしています。私はいくつかのひどく非効率的なコードを書きましたが、IEとFirefoxで機能しない理由を知ることができるように、それを単純化する方法を見つけるのに苦労しています。これらの互換性の問題で何が起こっているのかをよりよく理解するのに役立つ提案があれば、助けてください。

ここにリンクがあります：

http://jsfiddle.net/xZNU2/

http://cs-dev.dreamhosters.com/dropd.php

$(document).ready(function(){
$(".tab, .drop").hover(function(){
$(".tab").css("color","#FF7722");
$(".drop").css("display","block");
$("#tv, .droptv").hover(function(){
        $(this).css("color","#FF7722");
        $(".droptv").css("display","block");
        $(".droptv").hover(function(){
                $("#tv, .droptv").css("color","#FF7722");
                },function(){
                $(".droptv").css("color","#005BAB");
                });
        },function(){
        $(this).css("color","#005BAB");
        $(".droptv").css("display","none");
        });
$("#interact").hover(function(){
        $(this).css("color","#FF7722");
        },function(){
        $(this).css("color","#005BAB");
        });
$("#online").hover(function(){
        $(this).css("color","#FF7722");
        },function(){
        $(this).css("color","#005BAB");
        });
$("#vod, .dropvod").hover(function(){
        $(this).css("color","#FF7722");
        $(".dropvod").css("display","block");
        $(".dropvod").hover(function(){
                $("#dai").hover(function(){
                    $(this).css("color","#FF7722");
                    },function(){
                    $(this).css("color","#005BAB");
                    });
                $("#iguide").hover(function(){
                    $(this).css("color","#FF7722");
                    },function(){
                    $(this).css("color","#005BAB");
                    });
                $("#vod").css("color","#FF7722");
                },function(){
                $(".dropvod").css("color","#005BAB");
                });
        },function(){
        $(this).css("color","#005BAB");
        $(".dropvod").css("display","none");
        });
$("#tablet").hover(function(){
        $(this).css("color","#FF7722");
        },function(){
        $(this).css("color","#005BAB");
        });
$("#mobile").hover(function(){
        $(this).css("color","#FF7722");
        },function(){
        $(this).css("color","#005BAB");
        });
},function(){
$(".tab").css("color","#005BAB");
$(".drop").css("display","none");
 });
});
4

2 に答える 2

2

あなたの一番の問題は、あなたがイベントにイベントを添付しているということです。

$(".dropvod").hover(function(){
    $("#dai").hover(function(){
        ...

DOM要素にイベントをアタッチするのは非常に遅く、マウスが要素$("#dai)に入るたびに再度アタッチすることは言うまでもありません。.dropvod

私のアドバイスは、対話したい要素のハンドルを取得し、委任されたイベントを使用して要素を更新することです。例：

/* It would be better to create an association between the elements
 * For example data-index="1" would relate to the hover to the element to show
 */
$('.drop').on('mouseenter', '.dropl', function (e) {
    var id = $(this).attr('id');
    $('.drop' + id).show();

}).on('mouseleave', '.dropl', function (e) {
    var id = $(this).attr('id');
    $('.drop' + id).hide();

}).on('mouseenter', '.hoverable', function () {
    $(this).css("color","#FF7722");

}).on('mouseleave', '.hoverable', function () {
    $(this).css("color","#005BAB");
});

クロスブラウザに関しては、あなたのコードはFFで機能しているように見えますが、IEはそれ自体を排便していると思います:-)

于 2012-12-05T21:26:23.647 に答える
1

divの代わりに<ul> <li>またはを使用する必要があります。<dl> <dt> <dd>ただし、そのままにしておきたい場合は、特定のセクションのすべてのサブ要素を次のように検索することで、より動的にすることができます:(実際のコードではありません）

$('dropl').hover(
    function(){$(this).find)('.otherclass').slideDown(300);},
    function(){$(this).find)('.otherclass').slideUp(300);}
);

また、次のようにホバー時の色の変更にcssを使用すると、はるかに効率的になります。

.dropl {
    color: #005BAB;
}

.dropl:hover {
    color: #FF7722;
}

あなたはそれをある程度理解していますか？すべてのコードを記述する必要はありません。必要なものに異なるクラスを使用するだけで、jQueryはそのクラスのすべてのものを処理できます。

于 2012-12-05T21:06:08.703 に答える