JQuery slide Up水平メニューInternet Explorerの問題

Hey guysここでstackoverflow（JQuery slideUp horizontal menu instead of slideDown）に別の質問から投稿したコードを使用して、スライディングサブメニューの幅がメインメニューのように100％になるようにしました。 Firefox、Safari、Chrome、Operaでは動作しますが、IEでは動作しません。JQuery slide Up水平メニュー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

IE8互換で互換性なし。コードを貼り付けてIE上で見ると、リストのようなメニューが表示され、Firefox上に表示されている場合は、それがどのように機能するかがわかります。 – Panos

があるためQuirksモードでそれIEのorksせずに自分のマークアップに文書型を追加することを忘れないでくださいとそうそう、それは吸います。そして、アロスは、タグを閉じることを忘れないでください。偉大なブラウザは、あなたがクローズしないか、少なくともそれを修正しようとしますが、IEは狂ってしまうでしょう。

だから、あなたが最初にすべきことは次のとおりです。

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

注DOCTYPEとbodyとhtml終了タグ。そのことを、私は処分したので

$(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のデ幅を更新することに注意してください：さて、どうなる魔法はJavaScriptを使用しているところ

width: 100%;の文は#menu ul ulです。

希望は動作します。リンク：http://jsbin.com/oliya3。

出典

2011-01-19 15:54:00

本当にトリックをしたおかげで男！：D – Panos

JQuery slide Up水平メニューInternet Explorerの問題

答えて

関連する問題