CSS 可左右伸缩的PANEL

CSS 可上下伸缩的PANEL
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属性来判断

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

相关推荐