Question

用javascript实现一个可以展示更多列表的按钮。比如说数据源中有21个列表，页面先显示3个列表，

你可以点击列表下“显示更多列表”按钮来显示更多的列表项，。每次点击增加3个，直至显示完所有列表，最后按钮属性变为不再可用。

Answer 1

<input type="button" value="显示+3" onclick="showmore(3);" /><br />
<div style="width:200px;height:60px;line-height:20px;overflow:hidden;border:1px solid #ccc;" id="list">
1<br />2<br />3<br />4<br />5<br />6<br />
7<br />8<br />9<br />10<br />11<br />12<br />
13<br />14<br />15<br />16<br />17<br />18<br />
19<br />20<br />21
</div>

<script>
function showmore(num){
var max_height = 20*21;
var current_height = parseInt(document.getElementById("list").style.height);
if(current_height<max_height){
document.getElementById("list").style.height = current_height + (num * 20);
}
}
</script>

Answer 2

<select size="3" id="select">
<option>电视</option>
<option>小说</option>
<option>电影</option>
<option>音乐</option>
<option>上网</option>
<option>游戏</option>
<option>漫画</option>
<option>写作</option>
</select>
<input type="submit" id="button" value="提交" />

<script type="text/javascript">
var list = document.getElementById('select'),
listLen = list.options.length;
document.getElementById('button').onclick = function(){
var newSize = 3+list.size;
list.size = newSize<listLen?newSize:listLen;
}
</script>

Answer 3

可以采用document.getElementById("resultMainImgTR3").style.display = "none";点击一次则将三个的style.display设置为black