CSS 可上下伸缩的PANEL

艾伦蓝

浏览: 595587 次
性别:
来自: 厦门

最近访客更多访客>>

stephen830

njdccy

lzy8828

WangJiaX

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html代码

<!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>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>

<style type="text/css">
	html,body{
		height:99.9%;
		margin:0;
	}
	
	.box{
		width:99%;
		margin:auto;
		padding-top:30px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		border:1px solid #DDDDDD;
		margin-top:2px;
	}
	
	.box_top{
		height:30px;
		margin-top:-30px;
		background:#F9F9F9;
		cursor:pointer;
		border-bottom:0px solid #DDDDDD;
	}
	
	.box_center{
		height:300px;
		background:#FFFFFF;
		overflow:auto;
		padding:5px 0 0 5px;
                display:none ;
	}
	
	.box_title{
		float:left;
		height:100%;
		font:bold 14px '宋体';
		color:#00538D;
		line-height:30px;
		padding-left:5px;
	}
	.box_opera{
		float:right;
		height:100%;
		text-align:right;
	}
	
	.top_shrink{
		padding-right:5px;
		font:bold 24px '宋体';
		color:#666666;
		/*cursor:pointer;*/
	}
	
</style>

<script type="application/javascript">

window.onload = function(){
        //绑定点击事件  需要引进jQuery.js
	$(".box_top").bind("click",null,function(obj){
		var box_content = $(this).parent().children(":last-child");
		var top_shrink = $(this).children(":last-child").children();
		var box_top = $(this);
		if(box_content.is(":hidden")){
			box_content.show();
			top_shrink.html("-");
			box_top.css("border-bottom","1px solid #DDDDDD");
		}else{			
			box_content.hide();
			top_shrink.html("+");
			box_top.css("border-bottom","0px");
		}
	});	
}


</script>
</head>

<body>
 
	<div class="box">
    	<div class="box_top">
        	<div class="box_title">PANEL01</div>
        	<div class="box_opera">
            	  <span class="top_shrink">-</span>
                </div>
        </div>
        <div class="box_center">  	
        </div>
    </div>
    
	<div class="box">
    	<div class="box_top">
        	<div class="box_title">PANEL02</div>
        	<div class="box_opera">
            	   <span class="top_shrink">-</span>
                </div>
        </div>
        <div class="box_center">
        </div>
    </div>

</body>
</html>

1.box是一个主窗口分别包含上部分的名称top div和下部分的内容div

2.第一次加载进来时内容是隐藏的即box_center的display为none 所以top的border-bottom 的大小为0px

3.点击事件在页面第一次加载进来时使用bind进行绑定显示还是隐藏用jQuery的:hidden属性来判断

这个例子主要是在点击的时候判断内容页面是否隐藏如果隐藏则显示显示则隐藏

分享到：

第二十四章 CentOS 系统配置工具： setup | CSS常用样式总结积累

2014-10-30 19:35
浏览 906
评论(0)
分类:编程语言
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS 可上下伸缩的PANEL

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS 可上下伸缩的PANEL

评论

发表评论

相关推荐

html pre标签使用（保留空格和回车等操作）

js 鼠标移过去渐变的效果（页面固定 定位栏）

js 在页面中跳转到指定位置

CSS 块对象（独占一行）和内联对象

CSS 点击div的同时显示或隐藏的div

CSS td里面两个input不换行设置（white-space: nowrap）

CSS NAV页面效果总结

CSS 页面置灰等待效果

CSS link和@import的区别

Css 表单

CSS 工作总结（nobr标签可以防止换行）

CSS常用样式总结积累

最近访客更多访客>>

js 鼠标移过去渐变的效果（页面固定定位栏）