js条件检索框

功能：基于数组生成内容。动作：rollup、rolldown等

export default class SearchMenu {
    static searchList = [
        { id: 1, head: "类<i></i>别", item: ["不限", "女戒", "花戒", "排戒"] },
        { id: 2, head: "价<i></i>格", item: ["不限", "1000-3000", "3000-6000", "6000-10000", "10000-20000", "20000以上"] },
        { id: 3, head: "主钻石重", item: ["不限", "30分以下", "30-39分", "40-49分", "50-59分", "60-69分", "克拉钻"] },
        { id: 4, head: "材<i></i>质", item: ["不限", "Pt铂金", "18K金", "Pt铂金-18K金"] },
        { id: 5, head: "爪馕爪数", item: ["不限", "四爪", "六爪", "其他"] },
        { id: 6, head: "主钻装饰", item: ["不限", "简单独钻", "戒头有辅石", "戒臂有辅石"] },
        { id: 7, head: "主钻型状", item: ["不限", "圆形", "异型"] },
        { id: 8, head: "款式系列", item: ["不限", "北极光追光", "Lady New York", "公主桂冠", "宠爱", "心心相印"] }
    ];

    constructor() {
        this.elem = this.createElem();
    }

    createElem() {
　　　　　if(this.elem) return this.elem;
        let con = document.createDocumentFragment();
        SearchMenu.searchList.map((value) => {
            let ul = document.createElement("ul");
            ul.className = value.id > 3 ? "goodsDiffer supFontHover rollup" : "goodsDiffer supFontHover";
            ul.innerHTML = `
            <li class="goodsType">
            <a href="###" class="typeHead">${value.head}</a>
                ${value.item.reduce((total, cur, index) => {
                switch (index) {
                    case 0:
                        total += `<a href="###" class="typeItem spe">${cur}</a>`;
                        return total;
                        break;
                    default:
                        total += `<a href="###" class="typeItem">${cur}</a>`;
                        return total;
                        break;
                }
            }, "")}
            </li>
            `;
            con.appendChild(ul);
        }, "");

        //action: 折起或展开搜索栏，只留三版
        this.rollBtn = document.querySelector(".goodsDiffer .nobrdr");
        this.rollBool = false;
        this.rollBtn.addEventListener("click", e => this.rollUpSearch(e));
        return con;
    }

    //插入父容器最前位置,当bool为true则添加到末尾
    unShiftIn(parent, bool) {
        parent = HTMLElement.isPrototypeOf(parent.constructor) ? parent : document.querySelector(parent);
        if (parent) bool ? parent.appendChild(this.elem) : parent.insertBefore(this.elem, parent.firstChild);
    }

    rollUpSearch(e) {
        let list = document.querySelectorAll(".rollup");
        Array.from(list).map(value => {
            value.style.display = !this.rollBool ? "none" : "block";
            e.target.innerText = !this.rollBool ? "展开高级搜索" : "收起高级搜索";
        })
        this.rollBool = !this.rollBool;
    }
}

效果：

展开：

 

 折叠：