Jquery兼容性有关问题-JavaSript-爱易网页

Jquery兼容性有关问题

日期：2014-05-16　浏览次数：20400 次

Jquery兼容性问题？
Jquery纵向菜单 menu.js

JScript code


$(document).ready(function(){ 
//页面中的DOM已经装载完成时，执行的代码 
    $(".menubar1 > a").click(function(){
        $(".menubar > a").next(".menu_body").slideUp("slow");
        $(".menubar > a").css("background-image","url('images/menu.jpg')");
    });

     $(".menubar > a").each(function(i){
            $(this).click(function(){
                $(this).next(".menu_body").slideToggle(600);
                changeIcon($(this));
                $(".menubar > a").not($(".menubar > a")[i]).next(".menu_body").slideUp("slow");
                $(".menubar > a").not($(".menubar > a")[i]).css("background-image","url('images/menu.jpg')");
            });
        }); 
}); 
/** 
* 修改主菜单的指示图标 
*/ 
function changeIcon(mainNode) { 
if (mainNode) { 
if (mainNode.css("background-image").indexOf("menu.jpg") >= 0) { 
mainNode.css("background-image","url('images/menu_line.jpg')"); 
} else { 
mainNode.css("background-image","url('images/menu.jpg')"); 
} 
} 
}

页面代码

HTML code



<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body> 
<ul>
<li class="menubar1"> 
<a href="#">菜单项1</a> 
</li> 
<li class="menubar"> 
<a href="#">菜单项2</a> 
<ul class="menu_body"> 
<li> 
<a href="#">子菜单项21</a> 
</li> 
<li> 
<a href="#">子菜单项22</a> 
</li> 
</ul> 
</li> 
<li class="menubar"> 
<a href="#">菜单项3</a> 
<ul class="menu_body"> 
<li> 
<a href="#">子菜单项31</a> 
</li> 
<li> 
<a href="#">子菜单项32</a> 
</li> 
</ul> 
</li> 
</ul> 
</body>

CSS文件

CSS code


ul, li { 
/*清除ul和li上默认的小圆点*/ 
list-style: none; 
} 
ul { 
/*清除子菜单的缩进值*/ 
padding: 0; 
margin: 0; 
}
IMG{
    border: 0px;
    margin-top: -5px;
}
.menubar { 
width: 137px; 
} 
li { 
    
} 
a { 
/*取消所有的下划线*/ 
text-decoration: none; 
padding-left: 25px; 
display: block; 
display: inline-block; 
width: 100px; 
padding-top: 3px; 
padding-bottom: 3px;

} 
.menubar a{ 
font-family:"宋体";
font-size:12px;
color: #ffffff;
background: url(../images/menu.jpg);  
background-repeat: no-repeat; 
background-position: 3px center;
}

.menubar1 a{ 
font-family:"宋体";
font-size:12px;
color: #ffffff;
background: url(../images/menu.jpg);  
background-repeat: no-repeat; 
background-position: 3px center;
} 

.menubar li a{ 
color: black;
background-image: none;
} 
.menubar ul{ 
display: none; 
}

在IE下每次点击收缩完成的时候都会在快速有显出来一下在火狐下就没有这种现象是兼容性问题吗？

------解决方案--------------------
呵呵。顶.jquery就算有兼容问题，也不是一般人能改的。
------解决方案--------------------
...JQ的slideUp函数的问题建议楼主自己写个
用animate就行了比如
$(".menubar > a").not($(".menubar > a")[i]).next(".menu_body").animate({top:'-105px'},2000).animate({top:'-96px'},800).animate({top:'-100px'},600);
------解决方案---------

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Jquery兼容性有关问题

相关资料更多>

推荐阅读更多>