How to use original JAVASCRIPT to only display part of the five LIs and display the rest when clicked?

Question

code show as below:

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

The above is the HTML structure. How to use JAVASCRIPT (not JQUERY) to only display 5 links and hide the rest. You need to click on the picture or text to display it, and then click to hide it. How can I achieve this function?

Currently displayed:

I am link 1
I am link 2
I am link 3
I am link 4
I am link 5
...
I am link 10

The effect you want to display:

I am link 1
I am link 2
I am link 3
I am link 4
I am link 5
︿ //Click here to expand the remaining "I am link" 6-10", then click to hide "I am the link 6-10".

Answer 1

Let’s talk about a stupid way, asynchronous request. Load only what you need first, click the button to request the rest, and dynamically load it into the page. Add a class to the newly added li for click hiding.

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

The code is rather ugly, please forgive me (using jquery api)

Answer 2

After reading the above answers, I don’t think they are my thoughts. Let’s talk about mine here

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

Every time you call loadNode(), pass in the number of li to be generated as a parameter, and it can be generated dynamically

Answer 3

I can’t quite understand what you mean

css:
Set a reserved classname for li, such as .hide {display:none}
Now add hide to the following li classes

js:
Use the click event to trigger to determine whether there is a hide, and then delete the class or add the class according to the situation.

Probably this is the route.

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

The idea is to let ul overflow:hidden and then change the height.

Wrote a draft https://jsfiddle.net/straybug...