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

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

转载作者：太空宇宙更新时间：2023-11-04 00:40:02

25

4

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

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

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

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

谢谢。

最佳答案

我尝试使用 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 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58501042/

25

4

0

文章推荐： node.js - 将 jspm 安装到 ^0.16.34 没有提供注册表属性

文章推荐： c++ - 来自 C++11 中 C99 的 fenv.h

文章推荐： c - 指向内存中指针的指针的大小

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

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