Let’s talk about a stupid way, asynchronous request. Load only what you need first, click the button to request the rest, and dynamically load it into the page. Add a class to the newly added li for click hiding.

 
 
 
我是链接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"); } }); }) });

The code is rather ugly, please forgive me (using jquery api)

After reading the above answers, I don’t think they are my thoughts. Let’s talk about mine here

 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) }

Every time you call loadNode(), pass in the number of li to be generated as a parameter, and it can be generated dynamically

I can’t quite understand what you mean

css:
Set a reserved classname for li, such as .hide {display:none}
Now add hide to the following li classes

js:
Use the click event to trigger to determine whether there is a hide, and then delete the class or add the class according to the situation.

Probably this is the route.

toggle button

The idea is to let ul overflow:hidden and then change the height.

Wrote a draft https://jsfiddle.net/straybug...