javascript - “菜单触发器”脚本在 IE11 中不起作用

问题描述

使用 IE 11 时，我的代码出现问题。当我尝试单击触发按钮时，它不会响应，但在 Chrome、Firefox 和 MS Edge 中它工作正常。

请帮我解决一下这个。我一直在寻找很多，但仍然没有解决这个问题。

$(function() {
  $(".menu-trigger").on("click", function() {
    $(this).toggleClass("active");
    $(".g-nav").fadeToggle();
  });
});

https://codepen.io/venJ7/pen/KKKaxKO

谢谢你。

标签： javascripthtmlcssmenuinternet-explorer-11

我尝试使用 IE 11 浏览器测试您的代码，发现它可以正常工作。

测试代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.Nav {
  position: relative;
}

.menu-trigger {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  margin: 0;
  padding: 10px;
  z-index: 99999;
}

.menu-trigger i {
  background-color: #000;
  width: 44px;
  height: 7px;
  top: 24px;
  right: 23px;
  z-index: 9999;
}

.menu-trigger,
.menu-trigger i {
  position: absolute;
}

.menu-trigger i:nth-of-type(1) {
  top: 12px;
}

.menu-trigger i:nth-of-type(2) {
  top: 0;
  bottom: 0;
}

.menu-trigger i:nth-of-type(3) {
  bottom: 0px;
}

.menu-trigger.active i:nth-of-type(1) {
  transform: translateY(3px) rotate(-45deg);
}

.menu-trigger.active i:nth-of-type(2) {
  opacity: 0;
}

.menu-trigger.active i:nth-of-type(3) {
  transform: translateY(-7px) rotate(45deg);
  bottom: 24px;
}

.g-nav {
  display: none;
}

</style>
<script>
$(document).ready(function(){
  $(function() {
  $(".menu-trigger").on("click", function() {
    $(this).toggleClass("active");
    $(".g-nav").fadeToggle();
  });
});

});
</script>
</head>
<body>
<div class="Nav">
  <a class="menu-trigger">
    <i></i>
    <i></i>
    <i></i>
  </a>
  <nav class="g-nav" id="g-nav">
    <ul>
      <li>
        <p><a href="#">MENU</a></p>
      </li>
    </ul>
  </nav>
</div>

</body>
</html>

在 IE 11 浏览器中输出：

我建议您在 IE 11 中运行此示例以检查它是否正常工作。

如果问题仍然存在，请尝试检查控制台以查看是否有任何错误或警告消息。

javascript - “菜单触发器”脚本在 IE11 中不起作用

问题描述

解决方案

推荐阅读