简单的下拉菜单不适用于 IE8

Question

我正在尝试使用 jquery 制作一个简单的下拉菜单，但不适用于 IE8，知道为什么吗？

我已经尝试了几个替代解决方案，我知道有更简单的方法来处理简单的下拉菜单，但我真的很想知道为什么这段代码不能在 IE8 上运行，希望有人能提供帮助。

<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

好的，这里有一些东西。

你不应该使用 id 作为标志。因为，你为id设置的数值在IE浏览器中不起作用！取而代之的是，使用 data-* 属性，或者最好使用 class!
如果您只是使用 .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>

简单的下拉菜单不适用于 IE8

Simple dropdown not working on IE8

jquery

internet-explorer-8

drop-down-menu