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);

最终效果：

三、总结

在设置好元素内容的情况下，点击伸缩栏内容不会轻易变形。记录一下常用组件的实现方法，可以更方便的修改写好的组件内容。