Question

我有两个级别的导航。

<ul id="level1">
  <li id="Level1ListItemOne">
      <ul id="Level2">
        <li></li>
        <li></li>
        ...
     </ul>  
 </li>
  <li id="Level1ListItemTwo">
      <ul id="Level2">
        <li></li>
        <li></li>
        ...
     </ul> 
  </li>
  ...
</ul>

当页面打开时，Level1ListItemOne Level2可见。当用户将鼠标悬停在Level1ListItemTwo上时，Level1ListItemOne的Level2消失，Level1ListItemTwo的Level2出现。当用户徘徊于Level1ListItemTwo时，Level1ListItemOne的Level2重新出现。

我正在使用JQuery

jQuery("#Level1ListItemTwo").hover(
    function(){ 
        jQuery("#Level1ListItemOne> #level2").hide(); //hide level2 when hover over
        jQuery("#Level1ListItemOne").css("background-color","#003366");
    },
    function(){
        jQuery("#Level1ListItemOne> #level2").show(); //show level2 when hover out
        jQuery("#Level1ListItemOne").css("background-color","#0072c6");
    }
);

这在FireFox，Chrome，IE9中完美无缺，但不 IE10

在IE10中，它第一次运行，但之后没有运行。所以Level1ListItemT的Level2永远不会再出现。什么是IE10做的不同 - 我在开发人员工具中看不到任何东西！

Answer 1

我认为这是因为id由于区分大小而不正确。

如果浏览器支持，jQuery的类选择器使用javascript方法getElementsByClassName。此方法在quirks-mode页面上不区分大小写，在非quirksmode（符合标准的）页面上区分大小写。

另一个提示，id必须在您的页面内是唯一的，因此切换到class而不是id。

代码：

jQuery("#Level1ListItemTwo").hover(
    function(){ 
        jQuery("#Level1ListItemOne>.Level2").hide(); //hide level2 when hover over
        jQuery("#Level1ListItemOne").css("background-color","#003366");
    },
    function(){
        jQuery("#Level1ListItemOne>.Level2").show(); //show level2 when hover out
        jQuery("#Level1ListItemOne").css("background-color","#0072c6");
    }
);

参考：https://developer.mozilla.org/en-US/docs/Case_Sensitivity_in_class_and_id_Names

演示：http://jsfiddle.net/W9GL4/

jquery hover alternate在IE10中不起作用

1 个答案: