jquery 导航中的 IE 9/10 全局代码错误

Question

我在 IE 10 及更低版本的导航架中遇到 jquery 代码错误，

导航发生错误，微软页面说使用var insead，但是如何在.find()函数中使用var？

代码如下：

编辑： jquery 代码可与 4 级以上的导航菜单一起使用， 我想我在移动版的菜单中不需要它们，但需要捕捉多个级别。

这里是菜单的完整代码。

$("nav div").click(function() {
  $("ul").slideToggle();
  $("ul ul").css("display", "none");
  $("nav .on").toggleClass("on");
});
$("nav li").click(function(e) {
  $(this).find("> ul").slideToggle();
  $(this).find("> ul ul").css("display", "none");
  $(this).find("> ul li").removeClass("on");
  $(this).toggleClass("on");
  e.stopPropagation();
});
$(window).resize(function(){
	if($(window).width() > 768){
		$("ul").removeAttr('style');
	}
});

			nav ul {
			  margin: 0;
			  padding: 0;
			  list-style-type: none;
			  background: #e3e3e3;
			  position: relative;
			}
			nav li {
			  display: inline-block;
			  position: relative;
			}
			nav a {
			  color: #292929;
			  text-decoration: none;
			  padding: 15px 30px 15px 15px;
			  display: block;
			  position: relative;
			}
			.on > a,
			nav li:hover > a {
			  background: lightgrey;
			}
			nav ul ul {
			  position: absolute;
			  top: 100%;
			  min-width: 200px;
			  background: lightgrey;
			  display: none;
			}
			nav ul ul ul {
			  left: 100%;
			  top: 0;
			}
			nav ul ul li {
			  display: block;
			  background: #e3e3e3;
			}
			nav ul ul ul li {
			  background: #eee;
			}
			/* lets not confuse click with hover for now
			nav ul li:hover ul {
				display: block;
			}
			*/
			nav li i {
			  color: #292929;
			  float: right;
			  padding-left: 20px;
			}
			nav div {
			  background: lightgrey;
			  color: #292929;
			  font-size: 24px;
			  padding: 0.6em;
			  cursor: pointer;
			  display: none;
			}
			nav a:not(:only-child):after {
			  content: "";
			  position: absolute;
			  right: 10px;
			  top: 50%;
			  margin-top: -3px;
			  width: 0;
			  height: 0;
			  border-left: 6px solid transparent;
			  border-right: 6px solid transparent;
			  border-top: 6px solid #000;
			  transition: all 0.5s linear;
			}
			nav li:hover > a:after {
			  border-top-color: red;
			}
			.on > a:not(:only-child):after {
			  transform: rotate(-90deg);
			}
			ul ul .on > a:not(:only-child):after {
			  transform: rotate(-90deg);
			}


			@media (max-width: 768px) {
			  nav div {
				display: block;
			  }
			  nav ul {
				display: none;
				position: static;
				background: #e3e3e3;
			  }
			  nav ul li {
				display: block;
				  transition: border 0.5s ease;
				}
			  nav ul ul {
				position: static;
				background: #e3e3e3;
			  }
			  ul ul .on > a:not(:only-child):after {
				transform: rotate(-180deg);
			  }
			  li.on {
				background: #fff;
			  }
			  ul ul li.on {
				border-color: #aaa;
			  }
			  ul ul ul li.on {
				border-color: #ccc;
			  }
			}  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
	  <div> <i class="fa fa-bars">menu</i> </div>
	  <ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">First Level </a>
		  <ul>
			<li><a href="#">Second Level </a>
			  <ul>
				<li><a href="#">Illustration</a></li>
				<li><a href="#">Third level </a>
				  <ul>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">Vanilla JavaScript</a></li>
				  </ul>
				</li>
			  </ul>
			</li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Vanilla JavaScript</a></li>
		  </ul>
		</li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	  </ul>
	</nav>

Answer 1

好的，我在 jquery 代码中删除了 > 它们，它工作正常但出现错误 在 IE/8 上添加事件监听器。

从EventTarget.addEventListener()文档可以看出addEventListener方法支持IE9+，对于旧版IE，我们可以使用EventTarget.attachEvent()方法。

示例代码如下：

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

JavaScript 代码：

        // Function to change the content of t2
        function modifyText() {
            var t2 = document.getElementById("t2");
            if (t2.firstChild.nodeValue == "three") {
                t2.firstChild.nodeValue = "two";
            } else {
                t2.firstChild.nodeValue = "three";
            }
        }

        // Add event listener to table
        var el = document.getElementById("outside");

        if (el.addEventListener) {
            el.addEventListener("click", modifyText, false);
        }
        else {
            el.attachEvent("onclick", modifyText);
        }

IE8 中的结果如下：

此外，当我使用您的代码时，它会显示此问题：

此问题似乎与 JQuery 参考有关，请尝试将参考替换为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

到：

<script src="https://code.jquery.com/jquery-1.12.4.js"
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>

然后导航栏是这样的（F12开发者控制台工具没有报错）：