twitter-bootstrap 触发 data-toggle=offcanvas 事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/25278274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger data-toggle=offcanvas event
提问by Seb
I'm using a great bootstrap 3 layout that use an "offcanvas" sidebar. All is working great on all screen size.
我正在使用一个很棒的 bootstrap 3 布局,它使用了“offcanvas”侧边栏。在所有屏幕尺寸上一切都很好。
The HTML tag that triggered the sidebar is :
触发侧边栏的 HTML 标签是:
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
How could i trigger this event with jquery ?? Sometimes i need to toggle the sidebar on user event, somtimes i need to display the page with the sidebar hidden.
我怎么能用 jquery 触发这个事件?有时我需要在用户事件上切换侧边栏,有时我需要显示隐藏侧边栏的页面。
I try to trigger the click event with jquery but it does nothing as there isn't any onClick event on this tag...
我尝试用 jquery 触发点击事件,但它什么也没做,因为这个标签上没有任何 onClick 事件......
Thanks for your help.
谢谢你的帮助。
采纳答案by Seb
I found another solution using css only.
我找到了另一个仅使用 css 的解决方案。
I closely inspect the dom change when the toggle button is hit and i replicate those changes when i need to toggle the sidebar.
我在点击切换按钮时仔细检查 dom 更改,并在需要切换侧边栏时复制这些更改。
I'm sure there's a jscript method to call but after several hours searching the web, the css solution is fine...
我确定有一个 jscript 方法可以调用,但是在网上搜索了几个小时后,css 解决方案很好......
回答by cfj
Use the collapse()method that comes with Bootstrap. Something like
使用collapse()Bootstrap 自带的方法。就像是
$('.sidebar-toggle').collapse();
should work.
应该管用。
See the link below for more info on collapse():
有关更多信息,请参阅以下链接collapse():
回答by Om Sao
Classname: "sidebar-collapse" is responsible for collapsing the sidebar.
For example:
<body id="bodyContainer" class="hold-transition skin-blue sidebar-mini sidebar-collapse">
This is for collapsed sidebar.
类名:“sidebar-collapse”负责折叠侧边栏。例如:
<body id="bodyContainer" class="hold-transition skin-blue sidebar-mini sidebar-collapse">
这是折叠侧边栏。
<body id="bodyContainer" class="hold-transition skin-blue sidebar-mini">
This is for non-collapsed sidebar.
这是用于未折叠的侧边栏。
So, basically you have to write jquery function to remove/include class "sidebar-mini"
所以,基本上你必须编写 jquery 函数来删除/包含类“sidebar-mini”

