隐藏侧边栏并在主体上切换bootstrap类

Question

目前在我的rails应用程序中，我有一个基于bootstrap框架的站点。该页面分为主体col-md-9和持久侧边栏col-md-3。我已经合并了这个Javascript：

  $("#sidebar-toggle").click(function(){
    $("#sidebar").toggle();
  });

它完全符合我的要求，但我还希望在col-md-9和col-md-10 col-md-offset-1之间切换主体的bootstrap类，具体取决于侧边栏是否处于活动状态。

我知道.addClass和.removeClass，但我不确定如何将其合并到.toggle函数中。任何帮助将不胜感激！

Answer 1

您可以使用jquery的toggleClass：

$( ".main-body" ).toggleClass( "col-md-9" );
$( ".main-body" ).toggleClass( "col-md-10" );
$( ".main-body" ).toggleClass( "col-md-offset-1" );

如果它存在，

toggleClass将删除该类，或者当它不存在时添加它。

因此，如果我们带有类主体的div具有以下类标记：

class="main-body col-md-9"

第一个切换将删除col-md-9，第二个将添加col-md-10，第三个将添加col-md-offset-1。