1

我正在使用 twitter bootstrap spans 在网格布局中形成两列。我想让用户关闭最左边的跨度，以便右跨度填充视口。我通过隐藏左侧面板并更改右侧面板的宽度来完成此操作，并且效果很好。但是，我更喜欢关闭左面板滑动并更改右面板宽度以填充剩余空间。到目前为止，我想出的最好的是：

if ( show )
    $('.content-panel').css( { width: '76.6%' } );

$('.left-panel').animate( {width: 'toggle'}, function(){
    if ( !show )
        $('.content-panel').css( { width: '100%' } );
});

其中 .content 面板是右侧列。这种工作，但看起来很笨重。它确实需要两个跨度一起调整大小。欢迎提出任何建议。

4

3 回答 3

4

这是一个似乎可以完成您想要的快速解决方案。看这里的小提琴。

它从宽度的 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','');
  });
});​

这可能需要一些改进，但可以达到效果。

于 2013-01-03T11:13:28.203 回答
4

为了好玩，我破解了 Voodoo 的示例并使用 Javascript 来操作类，然后使用 CSS 转换来管理动画：http: //jsfiddle.net/WDV69/29/

不一定是更好的解决方案，只是不同。

如果我的 javascript 有点粗糙，那不是我的部门。

$("#closeTrigger").click(function() {

$('.container').removeClass('openLeft').addClass('closeLeft');  
});

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});
于 2013-01-04T02:54:26.810 回答
0

根据要求，另一种响应式解决方案：http:
//jsfiddle.net/panchroma/pwP5V/

同样，这是基于 @Voodo 启动的 javascript

它使用媒体请求来管理动画，所以如果你查看 CSS，你会看到一堆设置，比如 

@media (max-width: 480px) {
.to-hide {
background-color: yellow;  
}
....
}

它仍然需要一些微调，但我认为此时您需要使用现实生活中的内容，因为某些设置可能取决于左右栏的相对高度。

您可以进行无止境的定制。例如检查关闭在最窄窗口的工作方式。还可以针对打开和关闭以及不同的窗口大小定制转换时间。

这里应该有足够的东西让你坚持一段时间！

于 2013-01-06T03:41:38.963 回答