點選右則剪頭展開和收起頁面選單

weixin_34116110發表於2018-01-18
let hflag = 1; // 標記是否隱藏
function flagMenu(menuId, btnId) {
    let mainMenu = document.querySelector(menuId);
    let menuH = mainMenu.clientHeight;
    let unfoldBtn = document.querySelector(btnId);
    let classVal = unfoldBtn.getAttribute("class");
    let menuClassVal = mainMenu.getAttribute("class");

    if (hflag) {  // 當前為收起狀態,展開函式
        if (menuH == 42) {
            let setInt1 = setInterval(function () {
                menuH += 2;
                mainMenu.style.height = menuH + "px";
                if (menuH == 84) {
                    //unfoldBtn.innerText = "收起";
                    if (!hasClass(unfoldBtn, 'flag-down')) {
                        console.log(menuClassVal);
                        menuClassVal = menuClassVal.replace(menuClassVal, "menu-list menu-list-bg");
                        mainMenu.setAttribute("class", menuClassVal);
                        classVal = classVal.replace(classVal, "unfold-btn flag-down");
                        unfoldBtn.setAttribute("class", classVal);
                    }
                    hflag = 0;
                    clearInterval(setInt1);
                }
            }, 10);
        }
    } else {   // 當前為展開狀態,收起
        if (menuH == 84) {
            mainMenu.style.height = 42 + "px";
            if (!hasClass(unfoldBtn, 'flag-up')) {
                menuClassVal = menuClassVal.replace(menuClassVal, "menu-list");
                mainMenu.setAttribute("class", menuClassVal);
                classVal = classVal.replace(classVal, "unfold-btn flag-up");
                unfoldBtn.setAttribute("class", classVal);
            }
            hflag = 1;
        }
    }
}

相關文章