Mari kita bercakap tentang cara yang bodoh, permintaan tidak segerak. Muatkan hanya perkara yang anda perlukan dahulu, klik butang untuk meminta selebihnya, dan muatkan secara dinamik ke dalam halaman. Tambahkan kelas pada li yang baru ditambah untuk penyembunyian klik.

 <style>
        .hide{
            display:none;
        }
        .show{
            display:block;
        }
    </style>
    <p class="testbox">
        <ul>
            <li><a href="#">我是链接1</a></li>
            <li><a href="#">我是链接2</a></li>
            <li><a href="#">我是链接3</a></li>
            <li><a href="#">我是链接4</a></li>
            <li><a href="#" >我是链接5</a></li>
            <li><a href="#" class="hide">我是链接6</a></li>
            <li><a href="#" class="hide">我是链接7</a></li>
            <li><a href="#" class="hide">我是链接8</a></li>
            <li><a href="#" class="hide">我是链接9</a></li>
            <li><a href="#" class="hide">我是链接10</a></li>
        </ul>
        <button id="show">点击展开</button>
    </p>
     $("#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");
                    }
                });
            })
        });
        

Kod itu agak hodoh, harap maafkan saya (menggunakan jquery api)

Selepas membaca jawapan di atas, saya tidak fikir ia adalah idea saya. Mari kita bercakap tentang saya di sini

<ul id="list-container"></ul>
<button href="javascrpt:;" onclick="loadNode(5)">load more</button>

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 = '<a href="#">' + i + '</a>'
        docfrag.appendChild(snippest)
    }
    listContainer.appendChild(docfrag)
}

Saya tidak faham apa yang anda maksudkan

css:
Tetapkan nama kelas yang dikhaskan untuk li, seperti .hide {display:none}
Sekarang tambahkan hide pada kelas li berikut

js:
Gunakan acara klik untuk mencetuskan bagi menentukan sama ada terdapat sorok, dan kemudian padamkan kelas atau tambah kelas mengikut situasi.

Mungkin ini laluannya.

<button onclick="toggle_fn()">togol button</button>

<skrip>

var $lis=document.querySelectorAll("ul li");

for(var i=0;i<$lis.length;i++){
    if(i>4){
        $lis[i].classList.add("hide");        
    }
}

function toggle_fn(){
    for(var i=5;i<$lis.length;i++){        
        $lis[i].classList.toggle("hide");        
    }
}

</script>

Ideanya adalah untuk membiarkan ul melimpah:tersembunyi dan kemudian menukar ketinggian.

Menulis draf https://jsfiddle.net/straybug...