前端机试题

要求：

1、当一级标题超过两个，请展示“查看剩余标题”。点击“查看剩余标题”，显示隐藏的其他一级标题；

2、点击一级标题或右侧向下箭头，展开二级标题。当二级标题超过两个时，展示“查看剩余二级标题”。点击“查看剩余二级标题”，展开其它隐藏的二级标题。

3、点击二级标题右侧的弹窗按钮，在页面中心弹出一个区块和一个蒙层，区块中展示当前按钮所在一级标题和二级标题的index。点击蒙层，隐藏蒙层和区块。

HTML代码如下:

    <div class="content">
        <header>区块标题</header>
        <ul class="title-list">
            <li>
                <span class="first-title">一级标题</span>
                一级标题说明
                <span class="icon">></span>
                <ul class="sec-list">
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <div class="sec-bottom">查看剩余标题</div>
                </ul>
            </li>
            <li><span class="first-title">一级标题</span>一级标题说明<span class="icon">></span></span>
                <ul class="sec-list">
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <div class="sec-bottom">查看剩余标题</div>
                </ul>
            </li>
            <li><span class="first-title">一级标题</span>一级标题说明<span class="icon">></span></span>
                <ul class="sec-list">
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <div class="sec-bottom">查看剩余标题</div>
                </ul>
            </li>
            <li><span class="first-title">一级标题</span>一级标题说明<span class="icon">></span></span>
                <ul class="sec-list">
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <p class="sec-item-title">二级标题</p>
                            <p>二级标题</p>
                            <p>标签 标签</p>
                        </div>
                        <div class="right">
                            <button>弹窗</button>
                        </div>
                    </li>
                    <div class="sec-bottom">查看剩余标题</div>
                </ul>
            </li>
            <div class="bottom">查看剩余标题 ↓</div>
        </ul>
    </div>
    <div class="mask">
        <div class="mask-content">

        </div>
    </div>

CSS代码:

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.content header {
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

.title-list>li {
    font-size: 12px;
    color: #bbb;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.title-list>li .first-title {
    font-size: 16px;
    color: black;
    margin-right: 10px;
}

.icon {
    float: right;
}

.bottom {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.sec-bottom {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    color: black;
}

.sec-list {
    background-color: #f5f5f5;
}

.sec-list li {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.sec-list li .left {
    flex: 1;
}

.sec-list li .right {
    width: 20%;
}

.sec-list li .right button {
    width: 100%;
    height: 30px;
    background-color: #ff9800;
    color: white;
    outline: none;
    border: 0;
    border-radius: 5px;
}

.sec-item-title {
    color: black;
    font-size: 14px;
}

.mask {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
}

.mask .mask-content {
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: white;
    text-align: center;
    line-height: 100px;
    font-size: 28px;
}

JS代码:

    let oBottom = document.getElementsByClassName("bottom")[0];
    let titleList = document.getElementsByClassName("title-list")[0];
    let secLists = document.getElementsByClassName("sec-list");
    let mask = document.getElementsByClassName("mask")[0];
    let list = new List(titleList, oBottom, secLists, mask);

class List {
    constructor(oUl, moreBtn, secLists, mask) {
        this.oUl = oUl;
        this.moreBtn = moreBtn;
        this.secLists = secLists;
        this.mask = mask;
        this.render()
        this.eventBind()
    }
    // 初始渲染
    render() {
        let num = this.oUl.children.length
        if (num > 3) {
            for (let i = 2; i < num - 1; i++) {
                this.oUl.children[i].style.display = "none"
            }
        } else {
            this.moreBtn.style.display = "none"
        }
        for (let i = 0; i < this.secLists.length; i++) {
            this.secLists[i].style.display = "none"
        }

    }

    showMask(ele, i, j) {
        this.mask.style.display = "flex"
        ele.innerHTML = `${i}-${j}`
    }

    // 绑定事件
    eventBind() {
        let that = this
        this.moreBtn.onclick = () => {
            for (let i = 0; i < that.oUl.children.length; i++) {
                that.oUl.children[i].style.display = "block"
            }
            that.moreBtn.style.display = "none"
        }
        for (let i = 0; i < that.oUl.children.length - 1; i++) {
            that.oUl.children[i].onclick = (e) => {
                if (e.target.className == "icon") {
                    for (let j = 0; j < that.oUl.children.length - 1; j++) {
                        that.oUl.children[j].lastElementChild.style.display = "none"
                    }
                    e.target.nextElementSibling.style.display = "block"
                } else if (e.target.className == "sec-bottom") {
                    console.log("更多");
                    e.target.style.display = "none"
                }
            }
        }

        for (let i = 0; i < that.oUl.children.length - 1; i++) {
            for (let j = 0; j < that.oUl.children[i].lastElementChild.children.length - 1; j++) {
                that.oUl.children[i].lastElementChild.children[j].lastElementChild.onclick = () => {
                    that.showMask(that.mask.children[0], i, j)
                }
            }
        }
        that.mask.onclick = (e) => {
            if (e.target.className == "mask") {
                e.target.style.display = "none"
            }
        }
    }
}