[英]Why isn't jQuery working in IE11
因此，我正在使用jQuery為我的網站開發一個滑出菜單，整個操作在Chrome中工作正常，但在Internet Explorer中無法正常工作。 我正在運行IE11。 我瀏覽了許多有關此問題的帖子，但仍未解決。 非常感謝您的幫助。
@charset "utf-8"; .navdiv{ bottom:0px; top:0px; border-right: 50px solid #3184a1; wdith:1000px; position:fixed; left:-1040px; background-color:#67b5d1; z-index:1; box-shadow: 4px 0 5px rgba(0,0,0,0.2); } .navdiv:after { position: absolute; content: ' '; width: 0; height: 0; right: -70px; top: 50%; border-width: 15px 10px; border-style: solid; border-color: transparent transparent transparent #3184a1; z-index:100; } ul { width:1000px; z-index:2; postition:fixed; } li { list-style-type: none; } .menubutton { position: fixed; z-index: 2; cursor: pointer; margin-left: 16px; margin-top: 8px; -webkit-filter: drop-shadow(0px 0px 0px #222); filter: drop-shadow(0px 0px 0px #222); } .menuTable { margin-top: 12px; margin-left: 116px; position:fixed; z-index:2; } .menubox { width:360px; height:200px; position:relative; z-index:2; } .Xbutton { position: relative; z-index: 2; cursor: pointer; margin-top: 9px; margin-left: 1003px; } .navdiv, .spinningimage, .menubutton { -webkit-transition: all 1200ms ease; -moz-transition: all 1200ms ease; -ms-transition: all 1200ms ease; -o-transition: all 1200ms ease; transition: all 1200ms ease; } .menubutton, .Xbutton { -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .spinningimage { width: 20px; height: 20px; position: fixed; z-index: 4; margin-top: 168px; margin-left: -32px; -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transform: rotate(0deg); }
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/> <title>Untitled Document</title> <link href="menuTest.css" rel="stylesheet" type="text/css"> </head> <body> <script> $(document).ready(function() { $("#menubutton").click(function(){ $("div").css({ "left": "0px", }); }); $("#Xbutton").click(function(){ $("div ").css({ "left": "-1040px", }); }); }); </script> <script> $(document).ready(function() { $(".workbox").hover(function(){ $(".spinningimage").css({ "-ms-transform": "rotate(720deg)", /* IE 9 */ "-webkit-transform": "rotate(720deg)", /* Chrome, Safari, Opera */ "transform": "rotate(720deg)" }); }); $(".workbox").mouseleave(function(){ $(".spinningimage").css({ "-ms-transform": "rotate(0deg)", /* IE 9 */ "-webkit-transform": "rotate(0deg)", /* Chrome, Safari, Opera */ "transform": "rotate(0deg)" }); }); }); </script> <script> $(document).ready(function(){ $(".menubutton").hover(function() { $(this).css({ "-webkit-filter": "drop-shadow(5px 5px 5px #222)", "filter": "drop-shadow(5px 5px 5px #222)" }); }); $(".menubutton").mouseleave(function() { $(this).css({ "-webkit-filter": "drop-shadow(0px 0px 0px #222)", "filter": "drop-shadow(0px 0px 0px #222)" }); }); $(".Xbutton").hover(function() { $(this).css({ "-webkit-filter": "drop-shadow(5px 5px 5px #222)", "filter": "drop-shadow(5px 5px 5px #222)" }); }); $(".Xbutton").mouseleave(function() { $(this).css({ "-webkit-filter": "drop-shadow(0px 0px 0px #222)", "filter": "drop-shadow(0px 0px 0px #222)" }); }); $(".workbox").hover(function() { $(this).attr("src","DashedWorkBox.png"); }, function() { $(this).attr("src","WorkBox.png"); }); }); </script> <div class="navdiv" id="navdiv"> <img src="x button.png" class="Xbutton" id="Xbutton" width="30" height="30" alt=""/> <img src="MenuButton.png" class="menubutton" id="menubutton" width="30" height="30" alt=""/> <table width="200" border="0" class="menuTable"> <tbody> <tr> <td><img src="WorkBox.png" class="menubox workbox" width="474" height="278" alt=""/><img src="spinning_icon.png" class="spinningimage" alt=""/></td> <td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td> </tr> <tr> <td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td> <td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td> </tr> <tr> <td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td> <td><img src="Menu Box.png" class="menubox" width="474" height="278" alt=""/></td> </tr> </tbody> </table> <li> <ul></ul> <ul></ul> </li> </div> </body> </html>
嗨，我根據您的原始代碼創建了一個非常基本的Codepen，簡化了單擊動畫和單擊切換和CSS過渡的動畫（只需將-300px或任何寬度的絕對位置動畫為0，然后它將顯示和隱藏，應適用於大多數瀏覽器）：
$('.menu-icon').click(function(){ $('.navdiv').toggleClass('open'); });
.relative { position: relative; } .navdiv{ bottom: 0px; top:0px; border-right: 50px solid #3184a1; width: 300px; position: absolute; left: -300px; background-color:#67b5d1; box-shadow: 4px 0 5px rgba(0,0,0,0.2); z-index: 0; transition: .3s all ease-in-out; color: black; } .navdiv.open { left: 0px; } .navdiv:after { position: absolute; content: ' '; width: 0; height: 0; right: -70px; top: 50%; border-width: 15px 10px; border-style: solid; border-color: transparent transparent transparent #3184a1; } .menu-icon { position: absolute; top: 15px; left: 8px; z-index: 9999; cursor: pointer; } ul { position: absolute; top: 50px; left: 15px; z-index: 9999; color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img class="menu-icon" src="http://placehold.it/30x30"> <div class="navdiv"> <div class="relative"> <ul> <li>There's something here</li> <li>There's something here</li> <li>There's something here</li> <li>There's something here</li> <li>There's something here</li> <li>There's something here</li> </ul> </div> </div>
使用AJAX從jQuery向Rails服務器提交表單在IE11中不起作用
[英]Submitting a form to a Rails server from jQuery using AJAX isn't working in IE11
jQuery 不能在 IE11 上運行，但可以在 Chrome、Firefox 和 Edge 上運行？
[英]jQuery not working on IE11 but working on Chrome, Firefox and Edge?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.