【前端】侧边栏收缩的优化

继上一篇文章【前端】侧边栏显示隐藏的实现和动画效果

发现了一个bug：当展开侧边栏，拉大窗口（大尺寸的窗口状态是不显示侧边栏控制按钮的），于是这个侧边栏就回不去了。

于是我想到了一个办法，增加一个遮罩层。使页面侧边栏展开时，除了侧边栏，便是遮罩层。点击遮罩层，则隐藏侧边栏。

HTML关键代码如下

<!--遮罩层-->
 <div class="mubu" id="mubu" onclick="menuNotShow();return false;">
<!--侧边栏-->
 </div>
        <div class="box-left-menu" id="left-menu">
            <div class="title">
                萌狼工作室
                <hr>
            </div>

        <div>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">资源</a></li>
                <li><a href="#">网站</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        </div>

相关CSS样式

header .box-left-menu{
    /*从文档流完全删除，并相对于其包含块定位*/
    position: absolute;
    left:-10em;
    top:0;
    z-index:9999;
    width:10em;
    height: 100%;
    background-color: var(--background-color);
    box-shadow: 1px 1px 1px 1px var(--shadow-color);
    /*transition: transition-property transition-duration transition-timing-function transition-delay;*/
    transition: all 0.7s ease 0ms;
    opacity: 0;
}

header .mubu{
    position: absolute;
    width: 100%;
    height: 100%;
    /*优先级比左侧菜单栏低一级*/
    z-index:9998;
    background-color: var(--shadow-color);
    opacity: 0;
}

相关js

function menuShow(){
    let item = document.getElementById("left-menu");
    let mubu = document.getElementById("mubu");
    if(item.style.left==="0px"){
        item.style.left="-10em"
        item.style.opacity="0"
        mubu.style.opacity="0"
    }else{
        item.style.left="0px"
        item.style.opacity="1"
        mubu.style.opacity="1"
    }
}
function menuNotShow(){
    let item = document.getElementById("left-menu");
    let mubu = document.getElementById("mubu");
    item.style.left="-10em"
    item.style.opacity="0"
    mubu.style.opacity="0"
}