带有 Internet Explorer 下拉菜单的 jQuery答案

【问题标题】：jQuery with dropdown menu for Internet Explorer带有 Internet Explorer 下拉菜单的 jQuery
【发布时间】：2013-07-27 04:15:17
【问题描述】：

我正在使用 jQuery 1.10 创建一个基本的下拉菜单。它不适用于IE8。我该如何解决这个问题？

jsFiddle

jQuery

$(document).ready(function(){
    $(".urun").hover(function(){
        $("ul").slideDown(250);
        $("ul").mouseleave(function(){
            $("ul").slideUp(200);
        });
    });
});

HTML

<img src="http://blog.moovweb.com/wp-content/uploads/2013/04/stackoverflow-logo.png" alt="" class="urun"/>
<ul>
    <li><a href="#">123</a></li>
    <li><a href="#">321</a></li>
    <li><a href="#">213</a></li>
    <li><a href="#">312</a></li>
    <li><a href="#">331</a></li>
</ul>

【问题讨论】：

你的 IE 版本是多少？

标签： jquery html css internet-explorer internet-explorer-8

【解决方案1】：

试试这个

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <style type="text/css">
        .urun
        {
            width: 200px;
        }
        ul
        {
            list-style: none;
            display: none;
        }
        ul li
        {
            padding: 5px;
            width: 150px;
        }
        ul li:hover
        {
            background: #777;
        }
    </style>
    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
    <img src="http://blog.moovweb.com/wp-content/uploads/2013/04/stackoverflow-logo.png"
        alt="" class="urun" />
    <ul>
        <li><a href="#">123</a></li>
        <li><a href="#">321</a></li>
        <li><a href="#">213</a></li>
        <li><a href="#">312</a></li>
        <li><a href="#">331</a></li>
    </ul>
    <script type="text/javascript">

        $(document).ready(function () {
            $(".urun").hover(function () {
                $("ul").slideDown(250);
                $("ul").mouseleave(function () {
                    $("ul").slideUp(200);
                });
            });
        });</script>
</body>
</html>

【讨论】：

【解决方案2】：

您的代码运行良好，只需将您在 FIDDLE 中的 jquery 版本更改为例如 1.9.1。

使用.hover功能是一样的

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

所以你有两者的混合，你应该改变你的功能悬停：

$(".urun").hover(
function () {
    $("ul").slideDown(250);
},

function () {
    $("ul").slideUp(200);
});

编辑：

我认为这是使用 jquery 版本 1.10.1 的问题，如果您使用 1.10.0 可以正常工作..

【讨论】：

如果 fthmad9 想专门使用 1.10，建议更改库的版本并没有多大帮助。

【解决方案3】：

由于某些未知原因，当您使用 jQuery 1.10 时，jsfiddle 的 sn-ps 似乎无法在 ie8 上正常工作。我已经在 jsbin 上添加了你的示例：http://jsbin.com/eyexov/5 - 它在那里工作得很好。

Hover 可以这样处理两个功能：

$(element).hover(function() {
    // your "mouseenter" event
}, function() {
    // your "mouseleave" event
});

你只是以错误的方式使用。查看hover's documentation页面了解更多信息。

【讨论】：

它在 jsfiddle 上不起作用，但它通常可以工作。检查这个例子：jsbin.com/eyexov/2
你在尝试吗，首先将图像悬停在 ul 之后。知道，就像我说的
@fthmad9 - 如果您的意思是当您将光标指向菜单旁边的区域时菜单隐藏，那么这里有一个快速修复 - 例如，您可以用另一个容器包装图像和菜单：@ 987654324@.