jQuery 带有流畅的 Twitter 引导程序的可折叠侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13604285/
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
Collapsible sidebar with fluid twitter bootstrap
提问by Adam Morris
I am looking for a CSS solution to create a button to toggle a sidebar on and off using twitter bootstrap.
我正在寻找一个 CSS 解决方案来创建一个按钮来使用 twitter bootstrap 打开和关闭侧边栏。
I'd like one of those little icons people have on their webpage that looks like a pull tab when the sidebar is closed, and then follows the sidebar out when it is pulled - does this have a name?
我想要人们在他们的网页上拥有的那些小图标之一，当侧边栏关闭时它看起来像一个拉片，然后在侧边栏被拉出时跟随侧边栏 - 这有名字吗？
I've created a toggleSidebar icon link to do this, but I have two problems:
我创建了一个 toggleSidebar 图标链接来执行此操作，但我有两个问题：
- I can't get it to float with the sidebar using float: left or display: inline-block
- Fixed, it creates a column of it's own... I want it float on top of the main content.
- 我无法使用 float: left 或 display: inline-block 让它随侧边栏浮动
- 已修复，它会创建一个自己的列...我希望它浮动在主要内容的顶部。
The html:
html：
<div class="container-fluid">
<div class="row-fluid">
<div id="sidebar" class="span3 scrollDiv" style="display: none;">
<!--Sidebar content-->
</div>
<div id="content" class="span12">
<!--Main content-->
</div>
<a id="toggleSidebar" href="#" class="toggles"><i class="icon-chevron-right"></i></a>
</div>
</div>
The css:
css：
#toggleSidebar {
/* float: left; */
/* display:inline-block; */
position:fixed;
display:block;
left:0;
top:45px;
color:#779DD7;
padding:2px 4px;
}
The javascript:
javascript：
function sidebar(panels) {
if (panels === 1) {
$('#content').removeClass('span9');
$('#content').addClass('span12 no-sidebar');
$('#sidebar').hide();
} else if (panels === 2) {
$('#content').removeClass('span12 no-sidebar');
$('#content').addClass('span9');
$('#sidebar').show();
}
}
$('#toggleSidebar').click(function() {
if ($.asm.panels === 1) {
$('#toggleSidebar i').addClass('icon-chevron-left');
$('#toggleSidebar i').removeClass('icon-chevron-right');
return sidebar(2);
} else {
$('#toggleSidebar i').removeClass('icon-chevron-left');
$('#toggleSidebar i').addClass('icon-chevron-right');
return sidebar(1);
}
})
A working example of this: http://jsfiddle.net/amorris/dmyTR/
一个工作示例：http: //jsfiddle.net/amorris/dmyTR/
For the life in me, I can't find an example on the web - but here's a quick drawing of what I'm after:
对于我的生活，我无法在网络上找到示例 - 但这里是我所追求的快速绘图：
It's a bit like the effect @ http://simplerealtytheme.com/plugins/pullout-widgets/- which looks like they're using a display: block; clear: both; and then positioning the pull tab absolutely within the div with a negative right position.
这有点像@ http://simplerealtytheme.com/plugins/pullout-widgets/的效果——看起来他们正在使用 display: block; 清楚：两者；然后将拉片绝对定位在 div 内，并具有负的正确位置。
回答by Trufa
I think this is what you want, see here.
我想这就是你想要的，看这里。
Relevant code is this:
相关代码是这样的：
#content {
float:left;
}
#mapCanvas img {
max-width: none;
}
#maincont{
margin-top: 42px;
}
#toggleSidebar {
float:left;
color:#779DD7;
padding:2px 4px;
}
#sidebar{
float:left;
}
Please confirm that that was what you have in mind!
请确认这是您的想法！
回答by Maktouch
Is this what you had in mind?
这是你想到的吗？
Basically, instead of .hide() and .show(); you animate its position.
基本上，而不是 .hide() 和 .show(); 你动画它的位置。
// to hide
$('#sidebar').animate({
left: -180,
});
// to show
$('#sidebar').animate({
left: 20,
});
I removed #sidebar from .container-fluid, because, well, it's not part of the container. I also put #toggleSidebar inside #sidebar.
我从 .container-fluid 中删除了 #sidebar，因为它不是容器的一部分。我还将#toggleSidebar 放在#sidebar 中。
回答by Cole Lawrence
Here's an animated side drawer I drew up requiring very little bootstrap modification: http://zombiehippie.github.io/Side-drawer/
这是我绘制的动画侧抽屉，需要很少的引导程序修改：http: //zombiehippie.github.io/Side-drawer/
@media screen and (max-width: 768px) {
/* this is container is moved to the side if class is added*/
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
/* toggled when navbar is out */
.side-collapse-container.out{
left:200px;
}
.side-collapse {
/* need top to keep from overlapping fixed header*/
top:50px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
/* transition animates the element */
transition:width .4s;
}
/* toggled when navbar is in */
.side-collapse.in {
width:0;
}
}
A fixed navbar using the styles of .side-collapseallows us to fix the bar to the edge of our screen.
使用样式的固定导航栏.side-collapse允许我们将栏固定到屏幕边缘。
Adding .side-collapse-containerto the the container after the header allows that content to be shifted over on open.
.side-collapse-container在标题之后添加到容器允许内容在打开时转移。
Some script appends a click event to the [data-toggle=]selector.
某些脚本将单击事件附加到[data-toggle=]选择器。
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
Look at the github page for the source html or jade.
查看源html或jade的github页面。
HTML source https://github.com/ZombieHippie/Side-drawer/tree/gh-pages
HTML 源 https://github.com/ZombieHippie/Side-drawer/tree/gh-pages
