JQuery实现DIV展开折叠类似Outlook效果

最新推荐文章于 2023-03-20 21:03:00 发布

mituan1234567

最新推荐文章于 2023-03-20 21:03:00 发布

阅读量1k

点赞数

分类专栏： div+css JQuery JavaScript

本文链接：https://blog.csdn.net/mituan1234567/article/details/36198885

版权

JQuery 同时被 3 个专栏收录

104 篇文章 1 订阅

订阅专栏

JavaScript

64 篇文章 0 订阅

订阅专栏

div+css

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#container{
width:100%;
background-color:#999;
}
#navigate{
width:25%;
float:left;
background-color:#999;
}

/*
左侧导航顶部按钮
*/
#navTop {
background-color: grey;
height: 22px;
width: 100%;
}

#navTopRight {
background: url(Images/indicate.gif) no-repeat 50% 50%;
float: right;
width: 20px;
height: 100%;
margin-right: 5px;
}

#outercontent{
width:75%;
float:right;
background-color:#CCC;
z-index:10;
position:relative;
}
#content{
width:99%;
float:right;
background-color:#666;
z-index:11;
}
#ce{
position:absolute;
width:30px;
height:100px;
vertical-align:middle;

}
#seperator{
background-color:#900;
width:10px;
height:30px;
position:absolute;
top:50%;
border:solid 0px orange;

}

#seperatorHidden{
background-color: #e9edf1;
width:1%;
height:220px;
position:absolute;
border:solid 0px orange;
z-index:11;
}

.mini-tools {
width: 100%;
height: 20px;
background: url(Images/expand.gif) no-repeat 50% 50%;
}

#seperator:hover{
border:solid 1px orange;
}

.mini-layout-proxy {
background: #e9edf1;
border: solid 1px #A8A8A8;
cursor: default;
overflow: hidden;
height: 22px;
padding-left: 6px;
position: absolute;
z-index: 100;
left: -500px;
top: -500px;
}
</style>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {

//隐藏展开DIV
$("#seperatorHidden").hide();

///为折叠按钮添加点击事件
$("#navTopRight").live("click", function () {
$("#navigate").animate({ width: "1%" }, 100);
$("#outercontent").animate({ width: "99%" }, 100);
$("#navigate").empty();
$("#navigate").html('<div id="seperatorHidden"><div class="mini-tools"></div></div>');
});

///为展开按钮添加点击事件
$(".mini-tools").live("click", function () {
$("#navigate").animate({ width: "25%" }, 100);
$("#outercontent").animate({ width: "75%" }, 100);
$("#navigate").empty();
$("#navigate").html('<div id="navTop"> <div id="navTopRight"></div></div>');
});

$("#seperator").toggle(function (event) {
$("#navigate").animate({ width: "1%" }, 100);

$("#outercontent").animate({ width: "99%" }, 100);
$("#seperatorHidden").show();
},
function (event) {
$("#navigate").animate({ width: "25%" }, 100);
$("#outercontent").animate({ width: "75%" }, 100);
});//toggle
});

function expend() {
alert("expand");
}

</script>
</head>

<body>
<div id="container">
<div id="navigate">
<div id="navTop">
<div id="navTopRight"></div>
<p><a href="http://www.baidu.com" target="test">百度</a></p>
<p><a href="http://www.sina.com" target="test">新浪</a></p>
<p><a href="http://www.sohu.com" target="test">搜狐</a></p>
</div>

</div>
<div id="outercontent">

<div id="seperator"></div>
<div id="content" >
<iframe width="500" height="300" name="test" ></iframe>

</div>
</div>
<br style="clear:both;" />
</div>

</body>
</html>

mituan1234567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现DIV展开折叠类似Outlook效果

无标题文档#container{width:100%;background-color:#999;}#navigate{width:25%;float:left;background-color:#999;}/* 左侧导航顶部按钮 */#navTop { background-color: grey;
复制链接

扫一扫