菜单不适用于任何版本的 (IE）

Menu is not working with any version of (IE)

本文关键字：IE 版本 不适用 适用于 任何 菜单      更新时间：2023-09-26

亲爱的，菜单不适用于任何版本的IE，我该如何解决问题？ 下面是我的代码，CSS和JS的菜单。

这是菜单：

<ul class="topnav">
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

这是我的JS：

<script>
  /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
  function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
  }
</script>

这是我的 CSS：

ul.topnav {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: right;}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.topnav li a:hover {background-color: #000000;}
ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
      float: right;
      display: inline-block;
  }
}
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
      position: absolute;
      right: 0;
      top: 0;
  }
  ul.topnav.responsive li {
      float: none;
      display: inline;
  } 
  ul.topnav.responsive li a {
      display: block;
      text-align: center;
  }
}

代码取自w3schools： http://www.w3schools.com/howto/howto_js_topnav.asp

我给他们发短信，但没有他们的回复。

那么请问代码有什么问题。


编辑：我只是看到你在做什么，并查看了其他评论并意识到我的错误。 不支持classList，因此您可以使用className += " .." 。

var div = document.createElement("div");
div.className += " imgWin";  // Add imgWin class to the div
div.appendChild(img);
content.appendChild(div);

如果您像这样将所有列表项都放在div 下，然后最终将类附加到您的div 中，那应该有望解决问题。

相关文章：