Bagaimana untuk menggunakan JAVASCRIPT asli untuk memaparkan hanya sebahagian daripada lima LI dan selebihnya apabila diklik?

Question

Kod adalah seperti berikut:

<p class="box">
    <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="#">我是链接6</a></li>
        <li><a href="#">我是链接7</a></li>
        <li><a href="#">我是链接8</a></li>
        <li><a href="#">我是链接9</a></li>
        <li><a href="#">我是链接10</a></li>
    </ul>
</p>

Di atas adalah struktur HTML Cara menggunakan JAVASCRIPT (bukan JQUERY) untuk hanya memaparkan 5 pautan dan menyembunyikan selebihnya Anda perlu klik pada gambar atau teks untuk memaparkannya, dan kemudian klik untuk menyembunyikannya. Bagaimanakah saya boleh mencapai fungsi ini?

Sedang dipaparkan:

Saya pautan 1
Saya pautan 2
Saya pautan 3
Saya pautan 4
Saya pautan 5
...
Saya pautan 10

Kesan yang ingin anda paparkan:

Saya pautan 1
Saya pautan 2
Saya pautan 3
Saya pautan 4
Saya pautan 5
︿ //Klik di sini untuk mengembangkan baki "Saya pautan 6-10", kemudian klik untuk menyembunyikan "Saya pautan am" 6-10".

Answer 1

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)

Answer 2

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

Setiap kali anda memanggil loadNode(), masukkan bilangan li yang akan dijana sebagai parameter, dan ia boleh dijana secara dinamik

Answer 3

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.

Answer 4

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

Answer 5

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

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