Internet Explorer 8 中的 Javascript 菜单答案

【问题标题】：Javascript menu in Internet explorer 8Internet Explorer 8 中的 Javascript 菜单
【发布时间】：2014-03-05 02:32:47
【问题描述】：

我遇到了关于 javascript 菜单的问题。在 Chrome、Firefox、IE9、safari 中一切正常，但在 IE8 上菜单不可点击，没有任何反应。

这是我的简化代码：

<script type="text/javascript">
$(document).ready( function () {
  // On cache les sous-menus :
  $(".navigation ul.subMenu").hide();    
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu  > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
       return false;
    });   

} ) ;
</script> 

    <ul class="navigation" style="list-style-image : none ;" >

      <li class="toggleSubMenu"><a href="#" class="bouton" onclick="return false;" ><div id="metro_gris" ><span id="metro_title" ><?php echo METRO_MAP; ?></span><span id="metro_select" ></span></div></a>
        <ul class="subMenu" style="position : absolute ; display : none; list-style-image : none ; " >

                <li><a href="#" onclick="javascript:calculate('Abbesses Paris', 'WALKING', 'metro', 'Abesses' ); return false;" >Abesses (ligne 12)</a></li>

          </ul>
        </li>
    </ul>

CSS：

.navigation {
  padding: 0;
  color: #fff;
  width: 200px;
  margin : 0 auto;
  margin-top : 20px;
  margin-bottom : 20px;
  list-style: none;
  list-style-type: none; 
}
.navigation a {
  display: block;
  color: #fff;
  text-decoration: none;
  /*background: #000 url(menu-item.png) left bottom no-repeat;*/
}
.navigation a div{
    padding: 4px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;`enter code here`
}

.navigation .subMenu {
  font-size: 12px;
  /*background: #ccc url(subMenu.png) 0 0 repeat-x;*/
  font-size: 12px;
  margin: 0;
  padding: 0;
  width : 200px;
  background : #000;
  border-bottom: 1px solid <?php echo $site->couleur ; ?> ;
  list-style: none;
  list-style-type: none; 
}

什么可能导致此问题，我该如何解决？谢谢。

【问题讨论】：

你使用的是哪个版本的 jQuery 库？
请发一个有问题的JSFiddle。
这是我的问题的 JSFiddle link

标签： javascript jquery internet-explorer internet-explorer-8

【解决方案1】：

jquery 2.x 仅支持 IE9+：http://jquery.com/browser-support/

使用 Jquery 1.x。

【讨论】：

我正在使用 jquery v1.5.1
是的，我知道，但我尝试包含另一个版本的 jquery 并且其他功能不再起作用。这不是我最初的项目，所以我不能真正做我想做或需要的事情

【解决方案2】：

试试这个jsFiddle。我认为它会帮助你滚动。正如 cOlz 提到的，jQuery 2.x 是 IE9+，所以如果您需要 IE8 支持，您将需要使用 jQuery 1.x。在这个 jsFiddle 中，我使用 jQuery 1.9 只是为了确保它（应该）工作。

这是其中的js部分：

$('ul.subMenu').hide();

$('.navigation a.bouton').on('click', function (event) {
    if ($(this).next().css('display') === 'none') {
        $(this).next().slideDown('normal', function () {
            // Animation complete.
        });
    } else {
        $(this).next().slideUp('normal', function () {
            // Animation complete.
        });
    }

    event.preventDefault();
});

【讨论】：