如题所述
第1个回答 2016-03-21
可以改变 "div" 元素的高度(jQuery的animate方法):
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
<div style="margin-top:-800px">content more..</div>
</div>
$(".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。
本回答被提问者采纳第2个回答 推荐于2018-03-08
点击事件修改div高度,内容设定超出部分隐藏本回答被网友采纳
第3个回答 2018-03-08
<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>
<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>