Bootstrap - 以编程方式折叠侧边栏

Question

我想做的是单击按钮即可折叠侧边栏。为了实现这一点，我必须知道自动折叠侧边栏的事件“在哪里”以及如何以编程方式触发它。正如您在这个小提琴中看到的，如果您将垂直处理程序的大小调整到左侧，Dashboard菜单选项将显示，如果您将其调整到右侧，该小按钮将显示在右上角。

**** 编辑 ****

查看css我可以找到事件发生的位置：@media (min-width:768px) { ... }，因此，当屏幕宽度< 768px时，侧边栏将折叠并显示导航按钮。我如何以编程方式实现此操作？一张图片解释了我想要的行为：

Answer 1

它Navbar是使用 Bootstrap 的.collapse()功能构建的。
您可以使用以下任意命令：

.collapse('toggle')
.collapse('show')
.collapse('hide')

使用 JavaScript：

<button id="ToggleNavScript" class="btn btn-primary btn-lg" >
    Toggle Nav JavaScript
</button>

$("#ToggleNavScript").click(function() {
    $('.navbar-collapse').collapse('toggle');
});

使用页面上其他任何位置的 HTML：

<button id="ToggleNavAttr" class="btn btn-primary btn-lg" 
   data-toggle="collapse" data-target=".navbar-collapse" >
        Toggle Nav Attribute
</button>

这是小提琴中的工作演示