带有Internet Explorer下拉菜单的jQuery

时间:2013-07-26 08:28:49

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

我正在使用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>

3 个答案:

答案 0 :(得分:0)

试试这个

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

答案 1 :(得分:0)

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

Hover可以这种方式处理两个函数:

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

你刚用错了。查看hover's documentation页面了解更多信息。

答案 2 :(得分:0)

您的代码运行正常,只将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工作正常..