如何用原生态JAVASCRIPT写只显示部分五个LI其余的点击显示?
世界只因有你
世界只因有你 2017-05-19 10:18:35
0
5
416

代码如下:

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

世界只因有你
世界只因有你

全部回复(5)
伊谢尔伦

说个比较蠢的办法,异步请求。先只加载你需要的,点击按钮去请求剩余的,动态加载到页面。给新追加的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)

我想大声告诉你

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

<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的数量当作参数传入,就可以动态生成了

左手右手慢动作

不能完全读清楚你的意思

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

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

大概是这个路线吧。

为情所困

雷雷

脚本>

洪涛

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!