所以我正在使用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>
答案 0 :(得分：0)
您好我根据您的原始代码创建了一个非常基本的编解码器，将您的动画简化为单击切换和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>