簡單的下拉菜單不工作在IE8上

Question

我試圖做一個簡單的下拉菜單與jquery，但不工作的IE8，任何想法爲什麼？

我已經嘗試了一些替代解決方案，我知道有更簡單的方法來處理一個簡單的下拉列表，但我真的很想知道爲什麼這個代碼不能在IE8上工作，希望somedody可以提供幫助。

<nav class="navAplicacio"> 
    <ul> 
     <li><a href="#">Blog</a></li><li><a href="#">Suport</a></li> 
     <li><a href="#">Surt</a></li> 
     <li><a href="#">Torna</a></li> 
     <li><button class="btn-usuari" type="button"><span class="nom_usuari">${nomUsuari}</span><i>(${nomGroup}) </i> <span class="ico"><img src="${images_folder}/escudo.jpg" alt="Escut Aj. de Martorelles"></span><span class="caret"></span></button></li> 
    </ul> 
</nav> 


<script> 
jQuery(document).ready(function() 
{ 

    jQuery(".btn-usuari").click(function() 
    { 
     var X=jQuery(this).attr('id'); 
     if(X==1) 
     { 
      jQuery(".dp-menu").hide(); 
      jQuery(this).attr('id', '0'); 
     } 
     else 
     { 
      jQuery(".dp-menu").show(); 
      jQuery(this).attr('id', '1'); 
     } 
}); 

jQuery(".dp-menu").mouseup(function() 
{ 
    return false 
}); 

jQuery(".btn-usuari").mouseup(function() 
{ 
    return false 
}); 

jQuery(document).mouseup(function() 
    { 
     jQuery(".dp-menu").hide(); 
     jQuery(".btn-usuari").attr('id', ''); 
    }); 
}); 
</script> 

Answer 1

好的，這裏有一些東西。

1. 您不應該使用id作爲標誌。因爲，您爲id設置的數值在IE瀏覽器中不起作用！取而代之的是，使用data-*屬性，或者最好使用class！
2. 如果您只是使用.mouseup()和.mousedown來隱藏和顯示內容，只需使用CSS，不要使用JavaScript！這太昂貴了！

解決方案：

$(document).ready(function() { 
 
    $(".btn-usuari").click(function() { 
 
    $(this).toggleClass("open"); 
 
    }); 
 
});

.btn-usuari + .menu {display: none;} 
 
.btn-usuari.open + .menu {display: block;}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<meta charset="utf-8" /> 
 
<nav class="navAplicacio"> 
 
    <ul> 
 
    <li><a href="#">Blog</a></li> 
 
    <li><a href="#">Suport</a></li> 
 
    <li><a href="#">Surt</a></li> 
 
    <li><a href="#">Torna</a></li> 
 
    <li> 
 
     <button class="btn-usuari" type="button"> 
 
     <span class="nom_usuari">Username?</span> 
 
     <i>(Group) </i> 
 
     <span class="ico"><img src="http://lorempixel.com/16/16" alt="Escut Aj. de Martorelles" /></span> 
 
     <span class="caret"></span> 
 
     </button> 
 
     <ul class="menu"> 
 
     <li><a href="">Item 1</a></li> 
 
     <li><a href="">Item 2</a></li> 
 
     <li><a href="">Item 3</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>