爲什麼我的代碼不IE11

工作在的Internet Explorer 11，當我點擊按鈕外，子菜單不隱藏，但它在谷歌瀏覽器和火狐工作正常。爲什麼我的代碼不IE11

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dropdown

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     .dropbtn { 
      background-color: #4CAF50; 
      color: white; 
      padding: 16px; 
      font-size: 16px; 
      border: none; 
      cursor: pointer; 
     } 

     .dropbtn:hover, .dropbtn:focus { 
      background-color: #3e8e41; 
     } 

     .dropdown { 
      position: relative; 
      display: inline-block; 
     } 

     .dropdown-content { 
      display: none; 
      position: absolute; 
      background-color: #f9f9f9; 
      min-width: 160px; 
      overflow: auto; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     } 

     .dropdown-content a { 
      color: black; 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
     } 

     .dropdown-content a:hover {background-color: #f1f1f1} 

     .show {display:block;} 
     </style> 
    </head> 
    <body> 
     <h2>Clickable Dropdown</h2> 
     <p>Click on the button to open the dropdown menu.</p> 
     <div class="dropdown"> 
      <button id="myBtn" class="dropbtn">Dropdown</button> 
      <div id="myDropdown" class="dropdown-content"> 
       <a href="#home">Home</a> 
       <a href="#about">About</a> 
       <a href="#contact">Contact</a> 
      </div> 
     </div> 
     <script> 
      // Get the button, and when the user clicks on it, execute myFunction 
      document.getElementById("myBtn").onclick = function() {myFunction()}; 
      // myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content 
      function myFunction() { 
       document.getElementById("myDropdown").classList.toggle("show"); 
      } 

      // Close the dropdown if the user clicks outside of it 
      window.onclick = function(event) { 
      if (!event.target.matches('.dropbtn')) { 
       var dropdowns = document.getElementsByClassName("dropdown-content"); 
       var i; 
       for (i = 0; i < dropdowns.length; i++) { 
        var openDropdown = dropdowns[i]; 
        if (openDropdown.classList.contains('show')) { 
         openDropdown.classList.remove('show'); 
        } 
       } 
      } 
     } 
    </script> 
</body> 
</html>

來源

2016-05-18 Ehsan

如果這是你寫的，你應該把它添加到你的問題，而不是代碼。 – Andy

Javascript控制檯中是否有任何錯誤？我敢打賭說'event.target.matches'不是一個函數。 – Barmar

event.target.matches不會在Internet Explorer中存在。 Element.matches()中的瀏覽器兼容性表格指出，從IE 9開始，此方法可用，但使用非標準名稱msMatchesSelector。

所以嘗試：

window.onclick = function(event) { 
    matches = event.target.matches ? event.target.matches('.dropbtn') : event.target.msMatchesSelector('.dropbtn'); 
    if (!matches) { 
     var dropdowns = document.getElementsByClassName("dropdown-content"); 
     var i; 
     for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
       openDropdown.classList.remove('show'); 
      } 
     } 
    } 
}

來源

2016-05-18 15:49:15 Barmar

@barmer，這是工作，坦克你這麼多。 – Ehsan

您可以使用jQuery庫來獲得跨瀏覽器兼容的代碼在IE中也有效。

在你的情況下，用下面的代碼替換您<script>：

<script src="//code.jquery.com/jquery-1.12.3.min.js"></script> 
<script> 
$(function(){ 
    $(document).click(function(event){ 
     if(!$(event.target).is('#myBtn') 
     && !$(event.target).is('#myDropdown a')) { 
      $('#myDropdown').hide(); 
     } 
     if($(event.target).is('#myBtn')) { 
      $('#myDropdown').toggle(); 
     } 
    }); 
}); 
</script>

來源

2016-05-18 15:54:52 M4tini

爲什麼我的代碼不IE11

回答

相關問題