// 左侧问题列表
let menuList = document.querySelectorAll(".menu-wrapper>li")

// 左侧问题列表交互
for (let i = 0, j = menuList.length; i < j; i++) {
    menuList[i].querySelector(".menu-title").onclick = function () {
        let menuTitleHeight = this.offsetHeight / 10
        let secondMenuHeight = this.nextElementSibling.offsetHeight / 10 + 0.5
        if (this.parentNode.className === "menu-active") {
            this.parentNode.classList.remove("menu-active")
            this.parentNode.style.height = "3.6rem"
            this.querySelector("i").style.transform = " rotate(0deg)"
        } else {
            for (let i = 0; i < menuList.length; i++) {
                menuList[i].classList.remove("menu-active")
                menuList[i].style.height = "3.6rem"
            }
            this.parentNode.classList.add("menu-active")
            this.parentNode.style.height = (menuTitleHeight + secondMenuHeight) + 'rem'
            this.querySelector("i").style.transform = " rotate(-180deg)"
            let secondMenuList = this.parentNode.querySelectorAll("li")
            for (let i = 0, j = secondMenuList.length; i < j; i++) {
                secondMenuList[i].onclick = function () {
                    for (let i = 0; i < menuList.length; i++) {
                        let secondMenuList = menuList[i].querySelectorAll("li")
                        for (let i = 0, j = secondMenuList.length; i < j; i++) {
                            secondMenuList[i].querySelector("i").style.opacity = "0"
                            secondMenuList[i].style.background = "#fff"
                            secondMenuList[i].querySelector("span").style.color = "#212121"
                        }
                    }
                    for (let i = 0; i < secondMenuList.length; i++) {
                        secondMenuList[i].querySelector("i").style.opacity = "0"
                        secondMenuList[i].style.background = "#fff"
                        secondMenuList[i].querySelector("span").style.color = "#212121"
                    }
                    this.querySelector("i").style.opacity = "1"
                    this.style.background = "#f3f7ff"
                    this.querySelector("span").style.color = "#0147a6"
                }
            }
        }
    }
}
window.onload = function () {
    // 无帮助分类时 menuList 为空，跳过菜单初始化，避免 menuList[0] 为 undefined 报错
    if (!menuList.length) {
        return
    }
    let menuTitleHeight = menuList[0].querySelector(".menu-title").offsetHeight / 10
    let secondMenuHeight = menuList[0].querySelector(".second-menu-wrapper").offsetHeight / 10 + 0.5
    menuList[0].style.height = (menuTitleHeight + secondMenuHeight) + 'rem'
    menuList[0].querySelector("i").style.transform = " rotate(-180deg)"
    for (let i = 0, j = menuList[0].querySelectorAll("li").length; i < j; i++) {
        menuList[0].querySelectorAll("li")[i].onclick = function () {
            for (let i = 0; i < menuList[0].querySelectorAll("li").length; i++) {
                menuList[0].querySelectorAll("li")[i].querySelector("i").style.opacity = "0"
                menuList[0].querySelectorAll("li")[i].style.background = "#fff"
                menuList[0].querySelectorAll("li")[i].querySelector("span").style.color = "#212121"
            }
            this.querySelector("i").style.opacity = "1"
            this.style.background = "#f3f7ff"
            this.querySelector("span").style.color = "#0147a6"
        }
    }
}