如何用原生态JAVASCRIPT写只显示部分五个LI其余的点击显示？

Question

代码如下：

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

以上是HTML结构，如何使用JAVASCRIPT（非JQUERY）只显示5个链接，其余的隐藏，需要点击图片或文字显示，再点击隐藏。请问如何才能实现这种功能呢？

当前显示：

我是链接1
我是链接2
我是链接3
我是链接4
我是链接5
...
我是链接10

想要显示的效果：

我是链接1
我是链接2
我是链接3
我是链接4
我是链接5
︿ //这里点击这个展开剩余 "我是链接6-10"，再点击隐藏 "我是链接6-10"。

Answer 1

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

 <style>
        .hide{
            display:none;
        }
        .show{
            display:block;
        }
    </style>
    <div 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>
    </div>
     $("#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...