Twitter bootstrap 推特引导-向左/向右滑动一个范围

我使用twitter引导跨度在网格布局中形成两列。我希望使用户能够关闭最左边的跨度，以便右跨度填充视口。我通过隐藏左侧面板和更改右侧面板的宽度来实现这一点，效果很好。不过，我更喜欢关闭左面板幻灯片，更改右面板宽度以填充剩余空间。到目前为止，我想到的最好的方法是：

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

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

---

其中.content面板为右侧列。这种方法很管用，但看起来很笨重。它确实需要两个跨距一起调整大小。欢迎您提出任何建议。

这里有一个快速解决方案，似乎可以实现您的愿望。看

它从宽度的引导跨度类开始，然后单击，设置右框宽度扩展的动画，同时减小左框的大小，然后将其完全隐藏。动画完成后，我修改了添加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','');
  });
});​

---

这可能需要一些改进，但可以实现效果。

这里有一个快速解决方案，似乎可以实现您想要的。看

它从宽度的引导跨度类开始，然后单击，设置右框宽度扩展的动画，同时减小左框的大小，然后将其完全隐藏。动画完成后，我修改了添加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','');
  });
});​

---

这可能需要一些改进，但可以实现效果。

为了好玩，我黑了Voodoo的示例，使用Javascript操作类，然后使用CSS转换来管理动画：

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

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

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

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

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});

---

为了好玩，我入侵了Voodoo的示例，并使用Javascript操作类，然后使用CSS转换来管理动画：

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

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

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

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

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});

---

根据要求，另一个响应性强的解决方案：

这也是基于@Voodo启动的javascript

它使用媒体请求来管理动画，因此如果您查看CSS，您将看到一系列设置，如

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

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

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

---

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

根据要求，另一个响应性强的解决方案：

这也是基于@Voodo启动的javascript

它使用媒体请求来管理动画，因此如果您查看CSS，您将看到一系列设置，如

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

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

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

---

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

要澄清的是，您要操作的两列是否在单独的引导列中？David，是的。我有：span3列是我想滑动关闭的左边列。Neff-我猜你是想从开始，所以要澄清的是，你想在单独的引导列中操作的两列是吗？David，是的。我有：span3列是我想滑动关闭的左列。Neff-我猜你是想从它开始，所以它是@voodoo-谢谢，这很有用，但是动画很慢，看起来很糟糕，右框的大小调整不正确，我无法解决。David的代码工作得很好，所以这很好。@voodoo-谢谢，这很有帮助，但是动画很慢，看起来很糟糕，而且rightbox的大小调整不正确，我无法解决这个问题。David的代码运行得很好，这很好。David，非常感谢，它运行得很好。我不得不做一些调整，但一切都很好。使用.closeLeft/.openLeft作为按钮以及.container会引起一些最初的头痛。我很高兴这是有帮助的。如果需要，您可以通过使用@media requests在宽屏幕和窄屏幕上调整流体网格上的行为来改进此功能。我使用流体网格-您可以解释更多信息吗@媒体请求Mach cleaner@Davidtairoa，干得好。注意-CSS3动画在IE9及以下版本中不起作用，但回退似乎只起作用

---

在IE@nevf re媒体请求中很好。引导网格根据访问者浏览器窗口的宽度而变化。BS通过使用[at]媒体请求指定某些CSS属性来实现这一点，这些属性仅在特定的浏览器窗口宽度下被指定。如果您查看BS CSS文件，您将看到类似[at]media max width:767px{此处为平板电脑指定内容}的条目。当我有机会的时候，我会给你举个例子。大卫，非常感谢，这很有效。我不得不做一些调整，但一切都很好。使用.closeLeft/.openLeft作为按钮以及.container会引起一些最初的头痛。我很高兴这是有帮助的。如果需要，您可以通过使用@media requests在宽屏幕和窄屏幕上调整流体网格上的行为来改进此功能。我使用流体网格-您可以解释更多信息吗@媒体请求Mach cleaner@Davidtairoa，干得好。注意-CSS3动画在IE9及以下版本中不起作用，但回退在IE.@nevf re media requests中似乎可以正常工作。引导网格根据访问者浏览器窗口的宽度而变化。BS通过使用[at]媒体请求指定某些CSS属性来实现这一点，这些属性仅在特定的浏览器窗口宽度下被指定。如果您查看BS CSS文件，您将看到类似[at]media max width:767px{此处为平板电脑指定内容}的条目。有机会我会给你举个例子。