一、jquery实现面板伸缩下拉
代码:
(1)css部分
.panel{
width: 500px;
background: #D5BBF0;
}
.panel_header{
padding: 15px;
border: 1px solid #999;
text-align: center;
cursor: pointer;
}
.panel_body{
padding: 100px;
text-align: center;
border: 1px solid #999;
border-top:0px;
/* display: none;*/
background: #ccc;
}
(2)html以及jq部分
<body>
<div class="panel">
<div class="panel_header">面板头部</div>
<div class="panel_body">面板内容</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script>
$('.panel_header').click(function(){
$('.panel_body').slideToggle(1000);
})
</script>