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

Question

我想要做的是点击一个按钮就可以折叠边栏。要做到这一点，我必须知道＆＃34;哪里＆＃34;是自动折叠侧边栏以及如何以编程方式触发侧边栏的事件。正如您在this fiddle中看到的那样，如果您向左调整垂直处理程序的大小，则会显示Dashboard菜单选项，如果您将其调整到右侧，则会在右侧显示该小按钮角。

****编辑****

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

Answer 1

使用Bootstrap的.collapse()函数构建Navbar 您可以使用以下任何命令：

.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>

Here's a working demo in fiddle

Answer 2

您可以参考W3School的link。

这是主切换按钮：

<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo" aria-expanded="false">Simple collapsible</button>

下面是您要切换的div：

<div id="demo" class="collapse" aria-expanded="false" style="height: 0px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

所以你只需要'切换'课程到你的侧栏div。并确保它不包含'in'类，这意味着它处于展开状态。