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

您应该使用<ul> <li>or<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 可以处理该类中的所有内容。

于 2012-12-05T21:06:08.703 回答