代码块
jquery-ui自己去下载 需要引用jquery:
<!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>jquery实现网页右侧可展开折叠的DIV特效</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="js/lanrenzhijia.js"></script> -->
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<style>
.righteject {
position:fixed;
top:100px;
right:0px;
z-index:900000000;
_position:absolute;/*兼容IE6*/
/*_top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight);始终位于底部*/
_top: expression(documentElement.scrollTop+200);
}/*兼容IE6*/
.left_zhedie {
width:20px;
height:100px;
text-align:center;
display:block;
float:left;
font-size: 14px;
background-color:#000;
color:#FFF;
}
.content {
width:0px;
height:500px;
overflow:hidden;
float:left;
background-color:#CCC;
}
.left_zhedie span {
position:relative;
display:block;
z-index:999;
}
.rightejectthis {
background-color:#930;
}
.left {
position:fixed;
top:100px;
left:0px;
z-index:900000000;
}
.right_zhedie{
width:20px;
height:100px;
text-align:center;
display:block;
float:left;
font-size: 14px;
background-color:#000;
color:#FFF;
}
.right_zhedie span {
position:relative;
display:block;
z-index:999;
}</style>
</head>
<body>
<div class="righteject">
<strong class="left_zhedie"><span>左边折叠标题</span></strong>
<div class="content">
<div id="con_title">我在右边,点我去左边</div>
</div>
<strong class="right_zhedie" style="display:none;"><span>右边折叠标题</span></strong>
</div>
<script>
$(document).ready(function(){
$('.righteject strong').toggle(
function () {
$('.content').addClass("rightejectthis").animate({width: '+300px'}, "100");
},
function () {
$('.content').removeClass("rightejectthis").animate({width: '-300px'}, "100");
}
);
$('#con_title').toggle(
function(){
$(".left_zhedie").hide();
$('.right_zhedie').show();
$('.righteject').css('left','0px');
},
function(){
$(".left_zhedie").show();
$('.right_zhedie').hide();
$('.righteject').css('left','');
}
);
});
//设置可折叠的div可以拉升
$(function(){
$(".content").resizable();
});
</script>
</body>
</html>