Question

js ul li 隐藏多余li

例如
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
li列表只能显示3个，多余的不显示，请问js怎么写

Answer 1

<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
window.onload=function(){
    var lis=document.getElementsByTagName("li");
    for(var i=3;i<lis.length;i++){
        lis[i].style.display="none";
    }
}
</script>

还有一种更好的方法是用css来直接实现，无须js代码：

<style>
ul li:nth-child(n+4) {display:none}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>

Answer 2

设置ul高度等于3个li的高度，然后ul的overflow:hidden即可