Question

我正试图想出一种方法来创建一个通过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");
 });
});

Answer 1

您的第一个问题是您要在事件上附加事件，例如：

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

将事件附加到DOM元素的速度非常慢，更不用说您将再次重新附加$("#dai)这一事实，并且每次鼠标进入.dropvod元素时都会重新附加事件。< / p>

我的建议是获取要与之交互的元素的句柄，并使用委托事件来更新元素，例如：

/* 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只是自己搞砸了： - ）

Answer 2

您应该使用<ul> <li>或<dl> <dt> <dd>而不是div。但是，如果您希望保持原样，可以通过查找某些部分的所有子元素来使其更具动态性:(不是实际代码）

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

另外，如果你只是在悬停时使用css来改变颜色，那么你可以提高效率：

.dropl {
    color: #005BAB;
}

.dropl:hover {
    color: #FF7722;
}

你真的明白吗？你不需要编写所有代码，只需要为你想要的东西使用不同的类，jQuery就可以对那个类中的所有东西做些什么。

JQuery鼠标悬停事件的兼容性问题

2 个答案: