这是我使用的jquery滑动菜单的代码,在css中加载菜单项目的背景图片及菜单项的小图片,但是在使用时会反复从服务器请求那两个图片,
<script type="text/javascript">
$(document).ready(
function () {
$(".menuTitle").click(function () {
$(this).next("div").slideToggle("slow")
.siblings(".menuContent:visible").slideUp("slow");
$(this).toggleClass("activeTitle");
$(this).siblings(".activeTitle").removeClass("activeTitle");
});
});
</script>
body
{
margin:0;background-color:#9ad075;
}
.container
{
width:100%; text-align:center;
}
.menuTitle
{
width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
}
.activeTitle
{
width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
}
.menuContent
{
background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;
}
li
{
background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:13px; height:26px; line-height:26px;
}
li a:hover,a:active
{
color:Red;
font-size:14px;
font-weight:bold;
}
ul
{
margin:0;padding:0;
}
经过网上反复查找,正确的解决办法是在css代码顶部添加下面的代码就可以了,据说在ie7中这个bug已经修复!
html {
zoom: expression(function(ele){
ele.style.zoom = "1";
document.execCommand("BackgroundImageCache", false, true);
}(this));
}