说个比较蠢的办法，异步请求。先只加载你需要的，点击按钮去请求剩余的，动态加载到页面。给新追加的li添加class用于点击隐藏。

 
 
 
我是链接1
 
我是链接2
 
我是链接3
 
我是链接4
 
我是链接5
 
我是链接6
 
我是链接7
 
我是链接8
 
我是链接9
 
我是链接10
 
 点击展开 
 $("#show").on('click',function(){ $(".testbox>ul>li").each(function(){ if($(this).find("a").attr("class") == "hide"){ $(this).find("a").removeClass("hide").addClass("show"); }else if($(this).find("a").attr("class") == "show"){ $(this).find("a").removeClass("show").addClass("hide"); } }); }) });

代码写的比较丑，请见谅（使用jquery api）

上面的回答看了一下都不是我的思路，这里说一下我的吧

 load more

let listContainer = document.querySelector('#list-container') let docfrag = document.createDocumentFragment() function loadNode (n) { for (let i = 0; i < n; i++) { let snippest = document.createElement('li') snippest.innerHTML = '' + i + '' docfrag.appendChild(snippest) } listContainer.appendChild(docfrag) }

每次调用loadNode()，把要生成的li的数量当作参数传入，就可以动态生成了

不能完全读清楚你的意思

css：
给li设置一个预留的classname，如.hide {display:none}
现将下面的li的class都加上hide

js：
通过click事件触发判断是否有hide，然后根据情况是删掉这个class还是添加这个class。

大概是这个路线吧。

toggle button

思路就是让 ul overflow:hidden，然后改变高度就行。

写了个草稿 https://jsfiddle.net/straybug...