Jquery兼容性问题？
Jquery纵向菜单 menu.js
$(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')"); } } } <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>
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; }