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

可以改变 "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。

本回答被提问者采纳

点击事件修改div高度，内容设定超出部分隐藏本回答被网友采纳

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