CSS 可上下伸缩的PANEL

最新推荐文章于 2023-10-08 08:36:52 发布

艾伦蓝

最新推荐文章于 2023-10-08 08:36:52 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/lan12334321234/article/details/70049304

版权

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属性来判断

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

艾伦蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 可上下伸缩的PANEL

html代码Untitled Document html,body{ height:99.9%; margin:0; } .box{ width:99%; margin:auto; padding-top:30px; box-sizing:border-box; -moz-box-sizing:bord
复制链接

扫一扫