把div的高度弄成5个li的高度 然后overflow:hidden
解决方案 »
- 求QQ邮箱随身盘图片浏览全套代码
- js控制播放文件列表
- 在ie 中有这个东西createrange, 在firefox中咋样Createrange?
- 求一个检验字符串中是否有单引号的正则表达式
- 为什么我的onclick事件不响应
- 请教：表单中有4列多行checkbox.我想实现在提交时每列checkbox中至少有一个checkbox被选中。
- javascript中是否有判断字符串是否是数字的函数？
- 请教一个关于javascript函数的问题
- 谁知道无需验证的smtp服务器地址 高分求
- 固定表头的问题
- underscore.js中的debounce解析问题
- AES 加密 中文在 Web端加密的结果跟在java端加密的结果不一样 求高手解决
你没有看清我的问题啊 div不固定高度的
var len=5;//控制要显示的数量
var arr=$(".div li:not(:hidden)");
if(arr.length>len)
$('.div li:gt('+(len-1)+')').hide();
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ var len=5;//控制要显示的数量
var arr=$(".div li:not(:hidden)");
if(arr.length<len){
$(".btn").hide();
}
if(arr.length>len){
$('.div li:gt('+(len-1)+')').hide();
}
$(".btn").click(function(){
var arr=$(".div li:not(:hidden)");
if(arr.length>len){
$('.div li:gt('+(len-1)+')').hide();
}
else{
$('.div li:gt('+(len-1)+')').show();
}
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.btn{
width:100px;
height:30px;
float:left;
background:#00BCF3;
color:#FFF;
line-height:30px;
text-align:center;
}
.div{
width:300px;
height:100px;
float:left;
border:1px solid #066;
}
.div1{
width:300px;
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>
</head>
<body>
<a href="javascript:;" class="btn">点击</a><div class="div">
<ul>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
</div></body>
</html>请问下 我这个div是个必须是个固定高度的 当我点击a标签的时候 隐藏的li显示 怎么才能使div的高度自适应li的高度 使li都在div里面 而不会使隐藏的li在div外面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ var len=5;//控制要显示的数量
var arr=$(".div li:not(:hidden)");
if(arr.length<len){
$(".btn").hide();
}
if(arr.length>len){
$('.div li:gt('+(len-1)+')').hide();
}
$(".btn").click(function(){
var arr=$(".div li:not(:hidden)");
if(arr.length>len){
$('.div li:gt('+(len-1)+')').hide();
}
else{
$('.div li:gt('+(len-1)+')').show();
}
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.btn{
width:100px;
height:30px;
float:left;
background:#00BCF3;
color:#FFF;
line-height:30px;
text-align:center;
}
.div{
width:300px;
height:100px;
float:left;
border:1px solid #066;
}
.div1{
width:300px;
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>
</head>
<body>
<a href="javascript:;" class="btn">点击</a><div class="div">
<ul>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
</div></body>
</html>请问下 我这个div是个必须是个固定高度的 当我点击a标签的时候 隐藏的li显示 怎么才能使div的高度自适应li的高度 使li都在div里面 而不会使隐藏的li在div外面给.div 增加一个样式规则 display:table;.div
{
width: 300px;
height: 100px;
float: left;
border: 1px solid #066;
display:table;
}
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.div{
width:300px;
max-height:100px; /*不支持的无效,还是全部显示,ie6下无效*/
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.div{
width:300px;
max-height:100px; /*不支持的无效,还是全部显示,ie6下无效*/
overflow:hidden;/*不知道行不行*/
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>