CSS 可上下伸缩的PANEL

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

艾伦蓝

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

阅读量190

点赞数

分类专栏： CSS 文章标签： ui xhtml javascript ViewUI

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

版权

CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

[size=large][b]html代码[/b][/size]


<!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>

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

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

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

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