如何用原生態JAVASCRIPT寫只顯示部分五個LI其餘的點擊顯示？

Question

程式碼如下：

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

以上是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>
    <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

切換按鈕

<腳本>

雷雷

Answer 5

思路就是讓 ul overflow:hidden，然後改變高度就行。

寫了個草稿 https://jsfiddle.net/straybug...