Comment utiliser JAVASCRIPT natif pour afficher uniquement une partie des cinq LI et le reste lorsque vous cliquez dessus ?

Question

Le code est le suivant :

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

Ce qui précède est la structure HTML. Comment utiliser JAVASCRIPT (pas JQUERY) pour afficher uniquement 5 liens et masquer le reste Vous devez cliquer sur l'image ou le texte pour l'afficher, puis cliquer pour le masquer. Comment puis-je réaliser cette fonction ?

Actuellement affiché :

Je suis le lien 1
Je suis le lien 2
Je suis le lien 3
Je suis le lien 4
Je suis le lien 5
...
Je suis le lien 10

L'effet que vous souhaitez afficher :

Je suis le lien 1
Je suis le lien 2
Je suis le lien 3
Je suis le lien 4
Je suis le lien 5
︿ //Cliquez ici pour développer le reste "Je suis le lien 6-10", puis cliquez pour masquer "Je je lien "6-10".

Answer 1

Parlons d'une manière stupide, une requête asynchrone. Chargez uniquement ce dont vous avez besoin en premier, cliquez sur le bouton pour demander le reste et chargez-le dynamiquement dans la page. Ajoutez une classe au li nouvellement ajouté pour masquer les clics.

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

Le code est plutôt moche, pardonnez-moi s'il vous plaît (en utilisant l'API jquery)

Answer 2

Après avoir lu les réponses ci-dessus, je ne pense pas que ce soient mes pensées. Parlons des miennes ici

.

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

Chaque fois que vous appelez loadNode(), transmettez le nombre de li à générer en paramètre, et il pourra être généré dynamiquement

Answer 3

Je ne comprends pas très bien ce que tu veux dire

css :
Définissez un nom de classe réservé pour li, tel que .hide {display:none}
Ajoutez maintenant hide aux classes li suivantes

js :
Utilisez l'événement click pour déclencher afin de déterminer s'il y a un cache, puis supprimez la classe ou ajoutez la classe en fonction de la situation.

C'est probablement l'itinéraire.

Answer 4

<bouton onclick="toggle_fn()">bouton bascule</bouton>

<script>

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

L'idée est de laisser ul déborder : caché puis de changer la hauteur.

Rédaction d'un brouillon https://jsfiddle.net/straybug...