jQuery slideUp 水平菜单 Internet Explorer 问题答案

【问题标题】：JQuery slideUp horizontal menu Internet Explorer problemjQuery slideUp 水平菜单 Internet Explorer 问题
【发布时间】：2011-01-19 23:54:00
【问题描述】：

大家好，我使用了 stackoverflow (JQuery slideUp horizontal menu instead of slideDown) 上另一个问题中发布的代码，并尝试使它的滑动子菜单宽度与主菜单一样 100%。问题是它在 Firefox、Safari、Chrome、Opera 中有效，但在 IE 中无效...

我知道这与 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>

【问题讨论】：

您在使用哪个版本的 IE 时遇到问题？并能用几句话描述哪里出了问题？
在 IE8 上兼容和不兼容。如果你复制粘贴代码并在 IE 上查看它，你会看到它像列表一样显示菜单，如果你在 Firefox 上看到它，你会看到它是如何工作的。

标签： jquery css internet-explorer

【解决方案1】：

不要忘记在你的标记中添加一个 Doctype，因为没有它 IE orks on quirks mode 哦，是的，这很糟糕。还有，别忘了关闭你的标签，优秀的浏览器不会在意你是否关闭，或者至少会尝试修复它，但 IE 会发疯。

所以你应该做的第一件事是：

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

注意文档类型和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();  
      });
    }
  });
});

请注意，此代码将使用窗口的确切宽度更新 ul 的宽度，因此，我摆脱了 #menu ul ul 中的 width: 100%; 语句。

希望有效。链接：http://jsbin.com/oliya3.

【讨论】：