Bootstrap - 以编程方式折叠侧边栏 [英] Bootstrap - Collapse sidebar programmatically

问题描述

我想要做的是单击按钮折叠侧边栏.为了实现这一点，我必须知道哪里"是自动折叠侧边栏的事件以及如何以编程方式触发它.正如您在 函数.
您可以使用以下任何命令:

.collapse('toggle').collapse('显示').collapse('隐藏')

使用 JavaScript:

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

在页面上的任何其他地方使用 HTML:

<button id="ToggleNavAttr" class="btn btn-primary btn-lg"data-toggle="collapse" data-target=".navbar-collapse" >切换导航属性

这是小提琴的工作演示

What I want to do is collapse sidebar on a click of a button. To achieve this I'd have to know "where" is the event that collapses sidebar automatically and how to trigger it programatically. As you can see in this fiddle, if you resize vertical handler to the left, the Dashboard menu option will show up, and if you resize it to the right, that little button will show up on the right corner.

**** EDIT ****

Looking at the css I could find WHERE the event happens: @media (min-width:768px) { ... }, so, when the width of screen is < 768px, the side bar will collapse and the navigation button will show up. How can I achieve this action programmatically? A picture explains the behavior I want:

解决方案

The Navbar is built using Bootstrap's .collapse() function.
You can use any of the following commands:

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

With JavaScript:

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

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

With HTML anywhere else on the page:

<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

这篇关于Bootstrap - 以编程方式折叠侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！