成果展示：
    codepen链接：https://codepen.io/ashipiling/pen/poedxQV 该网站实现了demo，可进行拖拽尝试和代码修改。
    2021-05-30 22.30.16.gif 2021-05-30 22.35.37.gif
    图1 不同页面宽度下，sidebar关闭与开始情况演示。
    左图：页面宽度约为600px，sidebar打开时右侧全局向右平移。
    右图：页面宽度约为1000px，sidebar打开时右侧宽度减少。

    拟解决问题：
    当页面宽度    大于等于968px时：
    1）sidebar默认处于打开状态，宽度为20%；
    2）点击开关按钮，sidebar展开，右侧主页面    宽度减少，但两者都正常显示；
    3）再次点击开关按钮，sidebar关闭，右侧页面宽度恢复成100%；
    4）
    当页面宽度    小于968px时：
    1）sidebar默认处于关闭状态，打开后宽度为250px（为在小屏幕更好的显示）；
    2）点击开关按钮，sidebar展开，右侧主页面宽度不变，    整体向右侧移动**；
    3）再次点击开关按钮，sidebar关闭，右侧页面向左移动恢复正常；
    4）点击sidebar上的页面切换按钮后，右侧页面内容切换，sidebar自动关闭。

    实现思路：
    a） position：absolute固定sidebar和右侧部分的基础布局；
    b） media（max-width）设置自动关闭和打开的功能；
    c） 按钮函数逻辑：{
    页面宽度 = 获取页面宽度；
    sidebar宽度 = 获取sidebar宽度；
    if sidebar宽度大于0 并且leftbar.left等于0（进入关闭函数分支）：
    sidebar.left = 负的sidebar宽度；
    右侧页面.width = 100%，右侧页面.left = 0;
    else if leftbar.left小于0或者leftbar.width等于0（进入打开函数分支）：
    if 页面宽度大于等于968px：
    sidebar.left = 20%；
    右侧页面.width = 100% - 20%;
    右侧页面.left = 20%;
    else ：
    sidebar.left = 250px；
    右侧页面.left = 250px；
    }

    实现细节：
    html&css代码

    <!DOCTYPE html>















    javascript代码**
    //left_width: 正常情况下leftbar宽度，此处传入20%
    //min_width：小页面情况下leftbar宽度，此处传入250px
    //media_width：968px
    function openclose_sidebar(left_width, min_width, media_width) {
    var leftbar = document.getElementById(“leftbar”);
    var mainpage = document.getElementById(“mainpage”);
    var leftwidth_current = leftbar.clientWidth; //获取sidebar宽度
    var leftbar_left = Number(leftbar.style.left.replace(/px/g, “”)); //获取sidebar的left属性值
    var document_width = document.body.clientWidth; //获取页面宽度

    1. if (leftbar_left === 0 && leftwidth_current > 0) {               //sidebar宽度大于0 并且leftbar.left等于0（进入关闭函数分支） <br />        leftbar.style.left = "-" + leftwidth_current + "px";          //sidebar.left = 负的sidebar宽度；<br />        mainpage.style.width = "100%";                                 //右侧页面.width = 100%<br />        mainpage.style.left = 0;                                            //右侧页面.left = 0;<br />    } else if (leftbar_left < 0 || leftwidth_current === 0) {                 //leftbar.left小于0或者leftbar.width等于0（进入打开函数分支）<br />        leftbar.style.left = "0";<br />        if (document_width >= media_width) {<br />            leftbar.style.width = left_width;<br />            mainpage.style.width = "calc(100% - " + left_width + ")";  //由于传入的为20%的字符串，此处直接用calc函数计算<br />            mainpage.style.left = left_width;<br />        } else {<br />            leftbar.style.width = min_width;<br />            mainpage.style.left = min_width;                                     //页面小于968时，右侧页面的left都直接等于250px，整体往右推<br />        }<br />    }<br />}