如何在页面上实现收起展开的效果
如何在页面上实现收起展开的效果 如图
<script>
function toggle(id,exp) {
document.getElementById(id).style.display =exp?'block':'none';
document.getElementById('a' + id).style.display = exp ? 'none' : 'inline';
}
</script>
<a href="javascript:toggle('detail',true)" id="adetail">展开1</a><br />
<div id="detail" style="display:none">
详细内容1。。。。。。。
<div style="text-align:right"><a href="javascript:toggle('detail')">收起</a></div>
</div>
<a href="javascript:toggle('detail1',true)" id="adetail1">展开2</a><br />
<div id="detail1" style="display:none">
详细内容2。。。。。。。
<div style="text-align:right"><a href="javascript:toggle('detail1')">收起</a></div>
</div>
这两个div把内容都放里面，点击时切换
用jquery UI的Accordion就好了。
http://jqueryui.com/accordion/
用js实现一个方法,在方法里用div+CSS实现的。
在js方法里判断,如果当前状态为1，则显示下面的内容.
如果为0，则将它们隐藏就行了。
用JQ
收起展开
测试
<br> ul {<br> padding: 0px;<br> margin: 0px;<br> }<br> ul li div {<br> display: none;<br> }<br>
<br> $('#show li a').click(function(){<br> $(this).prev().toggle();<br> })<br>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收起展开</title>
<title>测试</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<style>
ul {
padding: 0px;
margin: 0px;
}
ul li div {
display: none;
}
</style>
</head>
<body>
<ul id="show">
<li>
<h4>网站运营</h4>
<div>
1.dfdjskhfdjkshf
</div>
<a href="#">展开</a>
</li>
<li>
<h4>网站运营</h4>
<div>
2.dfdjskhfdjkshf
</div>
<a href="#">展开</a>
</li>
</ul>
<script>
$('#show li a').click(function(){
$(this).prev().toggle();
})
</script>
</body>
</html>
你可以尝试下BootStrap框架，基于jQuery实现的，非常方便就能实现了。
用jquery中的slideUp()或者slideDown()或者slideToggle()实现