Javascript 将退出的引导边栏修改为可折叠

我在bootstrap中构建了我的项目，它有一个顶部导航栏和一个侧边栏

现在我需要制作边栏，可折叠如下：

但我的项目中的侧边栏在页面的左侧。如何使此边栏在尽可能少的更改下可折叠

HTML:

<div class="col-md-3">
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav">
            <ul class="nav" id="side-menu">
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>

您可以使用一个简单的jquery

首先，您需要将侧边栏设置为脱离屏幕。这可以通过添加

.sidebar {
    left: -300px // For example
}

然后，您需要生成一个jquery代码，用于监听您想要显示菜单的按钮上的单击

当按下按钮时，jquery代码应使侧栏再次显示，并使其处于可视范围（左：0；）

$（函数（）{
$（“#菜单”）。单击（函数打开（）{
$（'.sidebar'）.animate（{left:'0'}，500）；
})打开它
$（“#关闭”）。单击（函数关闭（）{
$（'.sidebar'）.animate（{left:'-200px'}，500）；
})//“关闭它”。在500毫秒的时间窗口内将其从屏幕上收回
});

所以你现在要做的是，在屏幕外设置栏，然后为你的打开/关闭创建一个按钮

---

此解决方案将使侧边栏位于现有主体的顶部，但是如果您希望它与您链接的站点上的方式相同，您只需向jquery添加一个命令来移动内容部分（可见部分）与侧边栏移动量相同。

有并且大多数使用带有

位置：绝对的包装器。

它只是隐藏侧边栏，而在边栏的空白处，我不想要空白空间，虽然当菜单被隐藏时，页面上的其他内容应该增加它的宽度，以适应页面，然后你可以只做一个内容-div，它包含了所有东西，但是边栏，只将DIV的宽度设置为100%或100VW，随便你喜欢。如果我能亲自看一下代码，那会很有帮助。我给你做了一个工作示例的代码笔。但您应该记住，stackoverflow不是免费代码的地方。你应该自己学习这些东西。这并不完美，但对于快速涂鸦来说应该会有所帮助。你可以自己解决剩下的问题我已经用过很多bootstrap了。只是你没有提供太多的信息。我给了你一个可以工作的代码补丁，你可以在你的网站上实现，如果这对你不起作用，那么这不是适合你的地方。如果这个解决方案不起作用，我建议您阅读一些关于jquery切换和引导元素的教程

<script>


$(function(){
    $("#menu").click(function open(){
        $('.sidebar').animate({ left: '0'}, 500);
        });//opening it
    $("#close").click(function close(){
        $('.sidebar').animate({ left: '-200px'}, 500);
    });// 'Closing it'. Takin it back off -screen within the timewindow of 500ms
    });


</script>