Wie verwende ich natives JAVASCRIPT, um beim Klicken nur einen Teil der fünf LIs und den Rest anzuzeigen?

Question

Der Code lautet wie folgt:

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

Das Obige ist die HTML-Struktur. So verwenden Sie JAVASCRIPT (nicht JQUERY), um nur 5 Links anzuzeigen und den Rest auszublenden. Sie müssen auf das Bild oder den Text klicken, um es anzuzeigen, und dann darauf klicken, um es auszublenden. Wie kann ich diese Funktion erreichen?

Derzeit angezeigt:

Ich bin Link 1
Ich bin Link 2
Ich bin Link 3
Ich bin Link 4
Ich bin Link 5
...
Ich bin Link 10

Der Effekt, den Sie anzeigen möchten:

Ich bin Link 1
Ich bin Link 2
Ich bin Link 3
Ich bin Link 4
Ich bin Link 5
︿ //Klicken Sie hier, um das verbleibende „Ich bin Link 6-10“ zu erweitern, und klicken Sie dann, um „Ich“ auszublenden Bin Link „6-10“.

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

不能完全读清楚你的意思

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

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

大概是这个路线吧。

Answer 4

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

<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

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

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