Question

如何实现CSS+JS一个DIV层的展开/折叠效果

Answer 1

可以改变 "div" 元素的高度(jQuery的animate方法)：
$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

也可以设置溢出隐藏：

<div style="min-height:10px;overflow:hidden">
    <div style="margin-top:-800px">content more..</div>
</div>

第二种方式也需要js动态改变div style里面的margin-top。

Answer 2

点击事件修改div高度，内容设定超出部分隐藏

Answer 3

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
	div{
		background-color:red;
	}
	a{
		display:block;

	}
</style>

<div id="toggle">
	<a>11</a>
	<a>11</a>
	<a>11</a>
	<a>11</a>
	<a>11</a>
</div>

<script>
	/*$(document).ready(function(){
		$(document).click(function(){
			$("#toggle").toggle();
		});
	});*/ //jQuery
	var live=true;
	document.onclick=function(){
		if(live==true){
			document.getElementById("toggle").style.display="none";
			live=false;
		}else{
			document.getElementById("toggle").style.display="block";
			live=true;
		}
		
	}


</script>