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上运行

1 个答案: