twitter-bootstrap Twitter Bootstrap - 向左/向右滑动 Span
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14130519/
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
Twitter Bootstrap - slide a Span left/right
提问by nevf
I'm using twitter bootstrap spans to form two columns in a grid layout. I want to enable the user to close the left-most span so the right span fills the viewport. I've done this by hiding the left panel and changing the width of the right panel and that works fine. However I'd prefer to have the left panel slide closed and the right panel width change to fill the remaining space. The best I've come up with so far is:
我正在使用 twitter bootstrap span 在网格布局中形成两列。我想让用户关闭最左边的跨度，以便右跨度填充视口。我通过隐藏左侧面板并更改右侧面板的宽度来完成此操作，并且效果很好。但是，我更愿意关闭左侧面板幻灯片并更改右侧面板宽度以填充剩余空间。到目前为止我想出的最好的是：
if ( show )
$('.content-panel').css( { width: '76.6%' } );
$('.left-panel').animate( {width: 'toggle'}, function(){
if ( !show )
$('.content-panel').css( { width: '100%' } );
});
where .content panel is the right hand column. This sort of works but looks pretty clunky. It really needs both spans to resize together. Any suggestions most welcome.
其中 .content 面板是右侧的列。这种工作，但看起来很笨重。它真的需要两个跨度一起调整大小。任何建议最受欢迎。
回答by Voodoo
Here's a quick solution that seems to accomplish what you want. See the fiddle here.
这是一个快速解决方案，似乎可以完成您想要的。请参阅此处的小提琴。
It starts with the Bootstrap span classes for width and then on click, animates the expansion of the width of the right box while reducing the size of the left box and then hiding it completely. I tinkered with adding span12 after the animation is complete.
它从用于宽度的 Bootstrap 跨度类开始，然后单击，动画右框宽度的扩展，同时减小左框的大小，然后将其完全隐藏。我在动画完成后修改了添加 span12。
$("#moveTrigger").click(function() {
// Left box animates to 0 width
$(".leftbox").animate({ "width": "0%" }, "slow", function() {
// Hide when width animation finishes
$(this).hide();
});
// Right box expands. Tinkered with add span12 after animation is complete
$(".rightbox").animate({ "width": "90%" }, "slow", function() {
$(this).removeClass('span6').addClass('span12').css('width','');
});
});?
This probably requires some refinement, but accomplishes the effect.
这可能需要一些改进，但达到了效果。
回答by David Taiaroa
For fun I hacked Voodoo's example and used the Javascript to manipulate the classes, then CSS transitions to manage the animation: http://jsfiddle.net/WDV69/29/
为了好玩，我破解了 Voodoo 的示例并使用 Javascript 来操作类，然后使用 CSS 转换来管理动画：http: //jsfiddle.net/WDV69/29/
Not necessarily a better solution, just different.
不一定是更好的解决方案，只是不同。
Appologies if my javascript is a bit rough, it's not really my department.
抱歉，如果我的 javascript 有点粗糙，那真的不是我的部门。
$("#closeTrigger").click(function() {
$('.container').removeClass('openLeft').addClass('closeLeft');
});
$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');
});
回答by David Taiaroa
As requested, another solution that is responsive:
http://jsfiddle.net/panchroma/pwP5V/
根据要求，另一个响应式解决方案：http:
//jsfiddle.net/panchroma/pwP5V/
Again this is based on the javascript started by @Voodo
这再次基于@Voodo 启动的 javascript
It uses media requests to manage the animation, so if you look in the CSS you'll see a bunch of settings like
它使用媒体请求来管理动画，所以如果你查看 CSS，你会看到一堆设置，比如
@media (max-width: 480px) {
.to-hide {
background-color: yellow;
}
....
}
It still requires some fine-tuning but I think you need real life content to play with at this point because some settings may be dependent on the relative heights of your left and right columns.
它仍然需要一些微调，但我认为此时您需要现实生活中的内容，因为某些设置可能取决于左右列的相对高度。
There is no end of customisation that you can do. For example check how the close works at the narrowest window. Transition timing could also be customised for opening as well as closing, and for different window sizes as well.
您可以做无止境的定制。例如检查关闭如何在最窄的窗口中工作。还可以针对打开和关闭以及不同的窗口大小自定义转换时间。
There should be enough here to keep you going for a while!
这里应该足够让你坚持一段时间了！
