JS實現菜單欄折疊

一、使用場景

在進行項目開發的時候，需要設置一些菜單欄，但是為了瀏覽的方便，通常使用一個事件對齊進行折疊操作。因此這里記錄一下使用原生js實現的案例。

二、實現

實現菜單欄的折疊，通常是改變元素的寬度，使其總和為100%。因此只需要去改變width的寬度即可。

let global = true;

function show() {
    let left_el = document.getElementsByClassName("left")[0];
    let right_el_h = document.getElementsByClassName("header")[0];
    let right_el_m = document.getElementsByClassName("mid")[0];
    let right_el_f = document.getElementsByClassName("footer")[0];
    if (global) {
        left_el.style.width = "1%";
        right_el_h.style.width = "99%";
        right_el_m.style.width = "99%";
        right_el_f.style.width = "99%";
        console.log("收縮！");
    } else {
        left_el.style.width = '20%';
        right_el_h.style.width = "80%";
        right_el_m.style.width = "80%";
        right_el_f.style.width = "80%";
        console.log("放開！");
    }
    global = !global;
}

let el = document.getElementById("one");
el.addEventListener("click", show, false);

最終效果：

三、總結

在設置好元素內容的情況下，點擊伸縮欄內容不會輕易變形。記錄一下常用組件的實現方法，可以更方便的修改寫好的組件內容。