在项目里面实现左的菜单折叠显示的效果，这个在软件界面里是常见的（本来到网上copy一段代码也就了事了，估计写的比我都好，但学习嘛，就要有学习的精神^^!）,
我是用.animate()去实现隐藏展开的，代码如下：
复制代码 代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style
!--
.left {
width:100px;
height:500px;
background:#060;
float:left;
}
#butid {
width:10px;
height:500px;
background:#C00;
float: left;
}
.content {
width:500px;
height:500px;
background:#000;
float:left;
color: #FFF
}
--
/style
/head
body
script type="text/javascript" src="thirdparty/jquery/jquery.js"/script
script type="text/javascript"
$(function(){
var i = 1;//设置状态判断
$('#butid').click(function(){
if(i == 1){
$('.content').animate({left: '-=100px',width: '600px'}, "slow");
$('.left').animate({width: '0px'}, "slow");
i = 2;
}else{
$('.content').animate({left: '0px',width: '500px'}, "slow");
$('.left').animate({width: '100px'}, "slow");//fadeOut()
i = 1;
}
});
});
/script
div class="left"123/div
div id="butid"/div
div class="content"123/div
/body
/html
如果这样子的话，在FF，IE7-8，chrome下执行是正常的。可是IE6下无法隐藏left，原因是因为ie6默认内容高宽度超出时，DIV会自动撑开。所以只要给.left{}加个overflow:hidden，问题也就解决~~
PS：本来早上是写个函数把.left里面的内容隐藏掉的，在写博文的时候突然想通了这个原理，还以为是.animate()在IE6下有BUG
您可能感兴趣的文章:
- 解决jQuery ajax请求在IE6中莫名中断的问题
- jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
- jquery fancybox ie6不显示关闭按钮的解决办法
- jquery submit ie6下失效的原因分析及解决方法
- 关于jquery中动态增加select,事件无效的快速解决方法
- jQuery:delegate中select()不起作用的解决方法(实例讲解)
- jquery html动态生成select标签出问题的解决方法
- jQuery选中select控件 无法设置selected的解决方法
- jQuery 跨域访问问题解决方法
- jquery的ajax()函数传值中文乱码解决方法介绍
- jQuery在ie6下无法设置select选中的解决方法详解
