Question

我使用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面板是右栏。这种作品看起来很笨重。它确实需要两个跨度来调整大小。任何建议都是最受欢迎的。

Answer 1

这是一个似乎可以实现您想要的快速解决方案。请参阅the fiddle here。

首先是Bootstrap span类的宽度然后单击，动画扩展右框的宽度，同时减小左框的大小，然后完全隐藏它。动画完成后，我修改了添加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','');
  });
});

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

Answer 2

为了好玩，我攻击了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');  
});

Answer 3

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

这再次基于@Voodo

启动的javascript

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

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

它仍然需要一些微调，但我认为你需要现实生活内容，因为有些设置可能取决于你的左右列的相对高度。

您可以执行自定义操作。例如，检查关闭在最窄窗口的工作方式。转换时间也可以定制为打开和关闭，以及不同的窗口大小。

这里应该有足够的时间来让你停留一段时间！

Twitter Bootstrap - 向左/向右滑动跨度

3 个答案: