Javascript menu in Internet explorer 8

Question

I got a problem with a javascript Menu. Everything works well in Chrome, Firefox, IE9, safari but the menu is not clickable on IE8, nothing happens.

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 :

.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.

Answer 1

jquery 2.x only supports IE9+: http://jquery.com/browser-support/

Use Jquery 1.x.

Answer 2

Try this 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. In this jsFiddle, I am using jQuery 1.9 just to ensure it (should) work.

Here is the js portion of it:

$('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();
});