html实现点击显示和隐藏侧边栏

主要是移动设备上有这种需要。点击按钮显示侧边栏，之后点击其他地方隐藏侧边栏主要的代码


//是不是刚刚显示的侧边栏
justShown = false;
//侧边栏得到了显示标志
isSidebarShown = false;
//显示/隐藏侧边栏
function showOrHideSidebar(){
        if(isSidebarShown){
            hideSidebar();
        }else{
            showSidebar();
        }
}
//显示侧边栏
function showSidebar(){
        justShown = true;//设置刚刚显示
        isSidebarShown = true;//显示标志
        //显示侧边栏
        var sidebar = document.getElementById("sidebarid");
        sidebar.style.display="block";
        //向右移动其他页面内容
        var content = document.getElementById("containerid");
        content.style.marginLeft  ="67vw";
}
//隐藏侧边栏
function hideSidebar(){
        isSidebarShown = false;//隐藏标志
        //隐藏侧边栏
        var sidebar = document.getElementById("sidebarid");
        sidebar.style.display="none";
        //恢复其他页面内容位置
        var content = document.getElementById("containerid");
        content.style.marginLeft  ="2vw";
}

如果是在侧边栏之外的地方点击，就隐藏侧边栏，这里我加了一个justShown标志，在显示侧边栏的时候设置为真。因为点击事件会触发隐藏侧边栏的函数，刚刚显示侧边栏的时候会判断侧边栏显示并且没有点击到侧边栏，所以会马上隐藏。所以加上这个标志就可以避免显示后立刻隐藏，而是下一次点击才会隐藏。

        // 监听整个文档的点击事件
        document.addEventListener("click", function(event) {
            // 获取div元素
            var sidebar = document.getElementById("sidebarid");
            // 判断点击的元素是否是div之外的区域
            if (!sidebar.contains(event.target)) {
                // 在此处执行您想要触发的函数逻辑
                if(isSidebarShown){
                    if(justShown){
                        //如果是刚刚显示的侧边栏此次点击不能立刻隐藏，但是取消标志
                        justShown = false;
                    }else{
                        //隐藏
                        hideSidebar();
                    }
                }
            }
        });

显示效果

还有一种更简单的办法实现显示隐藏列表菜单，但是是垂直方向上的。显示时候内容被挤下去，隐藏时候内容顶上来。在移动端也可以用


    <script type="text/javascript">
        function showTitlebarlist(){
            var element = document.getElementById("titlebarlistid");
            element.style.display="block";
        }
        function hideTitlebarlist(){
            var element = document.getElementById("titlebarlistid");
            element.style.display="none";
        }
        function showHideTitlebarlist(){

            var element = document.getElementById("titlebarlistid");
            if(element.style.display !== "none"){
                hideTitlebarlist();
            }else{
                showTitlebarlist();
            }
        }
    </script>