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

Ok, I removed > them in jquery codes, it works fine but getting error on IE/8 addEventListener.

来自EventTarget.addEventListener() document, we can see that the addEventListener method support IE9+, for the Older versions of IE, we could use the 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开发者控制台工具没有报错）：

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

IE 9/10 global code error in jquery navigation

windows

ajax

jquery

internet-explorer

function