私のコードは、<strong>のInternet Explorer 11</strong>でIE11

で働いていない理由は、私がボタンの外側をクリックすると、サブメニューが非表示になりませんが、それはGoogle ChromeのとFirefoxので正常に動作します。私のコードは、<strong>のInternet Explorer 11</strong>で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

あなたにもIEで動作するクロスブラウザ互換性のあるコードを取得するにはjQueryライブラリを使用することができます。あなたのケースでは

、次のコードを使用して<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

私のコードは、<strong>のInternet Explorer 11</strong>でIE11

答えて

関連する問題