• 查看作者
  • js网站加载更多内容显示和隐藏

    当我们网站内容较多的时候,可以进行隐藏后面一定的内容,点击更多就能够依次显示,下方实现功能实例已列出。

    js网站加载更多内容显示和隐藏 第1张图片

    js

    var btn = document.querySelector('a');
    var box = document.querySelector('.box').children; //获取box下面的子元素集合
    function openFold(btn, box) {
        let bool = true; //用于判断
        let num = 0; //点击次数
        btn.addEventListener('click', function() {
            if (bool) { //判断当前状态是否子类都显示
                if (num < box.length) { //判断点击次数不能超过box.length长度
                    if (num === box.length - 1) { //判断点击次数等于box.length长度的时候进行更换文本内容
                        this.innerText = '收起';
                        bool = false; //判断当前状态是否子类都显示完,显示完成返回flase,给下面关闭提供判断条件
                    }
                    box[num].style.display = 'block'; //子类根据当前点击次数一次显示
                    num++; //点击次数自增
                }
            } else if (!bool) { //判断子类都是现实完成
                for (let i = 0; i < box.length; i++) {
                    //利用循环遍历子类集合,隐藏所有子类
                    box[i].style.display = 'none';
                }
                this.innerText = '更多';
                bool = true; //隐藏之后,返回当前状态。
                num = 0; //初始化点击次数
            }
        })
    }
    openFold(btn, box);

    html

    <div>
           显示内容
    </div>
    <div class="box">
        <div>
           隐藏内容
        </div>
        <div>
           隐藏内容
        </div>
    </div>
    <a href="JavaScript:;">更多</a>

    css

    .box div {
    display:none;}
  • 0
  • 0
  • 0
  • 887
  • #笔记
  • 请登录之后再进行评论

    登录
    最新评论