JQuery slideUp水平菜單Internet Explorer問題

嘿傢伙我已經使用從另一個問題發佈的代碼在這裏在stackoverflow（JQuery slideUp horizontal menu instead of slideDown），並試圖使其滑動子菜單的寬度將100％像主菜單。事情是它在Firefox，Safari瀏覽器，鉻，歌劇，但在IE瀏覽器不工作...JQuery slideUp水平菜單Internet Explorer問題

我知道它與CSS有關，但我卡住，不知道如何解決它。

下面的代碼：

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
    <script> 
    $(function() { 
    $("#menu").find("li").each(function() { 
    if ($(this).find("ul").length > 0) { 
     $(this).mouseenter(function() { 
     $(this).find("ul").stop(true, true).slideDown(); 
     }); 
     $(this).mouseleave(function() { 
     $(this).find("ul").stop(true, true).slideUp(); 
     }); 
    } 
    }); 
    }); 
    </script> 
    <style> 
    html, body {padding:0;margin:0;} 
    #menu { 
    display:block; 
    margin:120px auto 20px; 
    position:relative; 
    background-color:#6a6a6a; 
    font:16px Tahoma, Sans-serif; 
    width:100%; 
    } 
    #menu ul { 
    padding:0; 
    margin:0; 
    width:100%; 
    } 
    #menu li { 
    float:left; 
    list-style-type:none; 
    } 
    #menu ul:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
    } 
    #menu li a { 
    display:block; 
    padding:10px 20px; 
    color:#eee; 
    text-decoration:none; 
    } 
    #menu li a:focus { 
    outline:none; 
    text-decoration:underline; 
    } 
    #menu li:first-child a { 
    border-left:none; 
    } 
    #menu li.last a { 
    border-right:none; 
    } 
    #menu a span { 
    display:block; 
    float:right; 
    margin-left:5px; 
    } 
    #menu ul ul { 
    display:none; 
    width:100%; 
    position:absolute; 
    background:#6a6a6a; 
    bottom:38px; 
    left:0; 
    } 
    #menu ul ul li { 
    float:left; 
    } 
    #menu ul ul a { 
    padding:5px 10px; 
    border-left:none; 
    border-right:none; 
    font-size:14px; 
    } 
    a:hover { 
    cursor: pointer; 
    } 
    </style> 
</head> 
<body> 
    <div id="menu"> 
    <ul> 
    <li> 
    <a>Item1</a> 
    </li> 
    <li> 
    <a>Item2</a> 
    <ul> 
     <li><a href="#">item2-1</a></li> 
     <li><a href="#">item2-2</a></li> 
     <li><a href="#">item2-3</a></li> 
    </ul> 
    </li> 
    <li> 
    <a>Item3</a> 
    <ul> 
    <li><a href="#">item3-1</a></li> 
    <li><a href="#">item3-2</a></li> 
    <li><a href="#">item3-3</a></li> 
    </ul> 
    </li> 
    <li> 
    <a>Item4</a> 
    </li> 
    </ul> 
</div> 
<body> 
<html>

來源

2011-01-19 Panos

哪個版本的IE有問題？並且可以用幾句話來形容哪裏出了問題？ – polarblau 2011-01-19 15:21:47

在IE8兼容性和無。如果您複製粘貼代碼並在IE上查看它，您會發現它顯示的菜單類似於列表，如果您在Firefox中看到它，則會看到它是如何工作的。 – Panos 2011-01-19 15:46:07

不要忘了一個DOCTYPE上怪癖模式添加到您的標記，因爲沒有它IE獸人和噢，那很爛。另外，不要忘了關閉你的標籤，偉大的瀏覽器不會在乎你是否關閉，或者至少會嘗試修復它，但IE會變得瘋狂。

所以，你應該做的第一件事是：

<!doctype html> 
<html> 
<head> 
    <!-- bla bla bla --> 
</head> 
<body> 
    <div id="menu"> 
    <ul> 
    <!-- bla bla bla --> 
    </ul> 
    </div> 
</body> 
</html>

注意DOCTYPE和body和html關閉標籤。

現在，這裏的魔法會發生與JavaScript：

$(function() { 
    $("#menu").find("li").each(function() { 
    var $el = $(this); 

    if ($el.find("ul").length > 0) { 
     $el.mouseenter(function() { 
     $el.find("ul").stop().css("width", $(window).width()).slideDown(); 
     }); 
     $el.mouseleave(function() { 
     $el.find("ul").stop().slideUp(); 
     }); 
    } 
    }); 
});

注意，這個代碼將更新與Windows的確切寬度UL的德寬，正因爲如此，我擺脫在#menu ul ul中的width: 100%;聲明。

希望工程。鏈接：http://jsbin.com/oliya3。

來源

2011-01-19 15:54:00

JQuery slideUp水平菜單Internet Explorer問題

回答

相關問題