[英]Javascript menu in Internet explorer 8
I got a problem with a javascript Menu. 我遇到了JavaScript菜单问题。 Everything works well in Chrome, Firefox, IE9, safari but the menu is not clickable on IE8, nothing happens.
一切在Chrome,Firefox,IE9,safari中都可以正常运行,但是在IE8上无法单击菜单,没有任何反应。
Here is my code simplified : 这是我的代码简化:
<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 : 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;
}
What might be causing this issue and how can I solve it? 是什么导致此问题,如何解决? Thank you.
谢谢。
jquery 2.x only supports IE9+: http://jquery.com/browser-support/ jQuery 2.x仅支持IE9 +: http : //jquery.com/browser-support/
Use Jquery 1.x. 使用Jquery1.x。
Try this jsFiddle . 试试这个jsFiddle 。 I think it will help get you rolling.
我认为这将帮助您滚动。 Just as cOlz mentioned, jQuery 2.x is IE9+ so if you are in need of IE8 support, you will need to use jQuery 1.x.
就像cOlz提到的那样,jQuery 2.x是IE9 +,因此,如果您需要IE8支持,则需要使用jQuery1.x。 In this jsFiddle, I am using jQuery 1.9 just to ensure it (should) work.
在此jsFiddle中,我使用jQuery 1.9只是为了确保它(应该)正常工作。
Here is the js portion of it: 这是它的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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.