javascript - 在 bootstrap3 中切换侧边栏？

Question

我正在尝试获取可切换的侧边栏:

没有侧边栏:

>> | Main text
   | goes here

带侧边栏:

H1 << | Main text
H2    | goes here

(这是行为示例:http://pythonhosted.org/cloud_sptheme - 请参阅侧边栏上的按钮。使用其代码库并不容易，因为它不是基于 Bootstrap 的)

我从一个使用 Bootstrap 2 和 jQuery 1.8 的工作示例开始:jsfiddle , SO question ，并尝试使其在 Bootstrap 3 上运行。下面是代码 ( code on bootply ):

JavaScript:

$.asm = {};
$.asm.panels = 1;

function sidebar(panels) {
    $.asm.panels = panels;
    if (panels === 1) {
        $('#content').removeClass('col-md-9');
        $('#content').addClass('col-md-12');
        $('#sidebar1').removeClass('show');
        $('#sidebar1').addClass('hide');
    } else if (panels === 2) {
        $('#content').removeClass('col-md-12');
        $('#content').addClass('col-md-9');
        $('#sidebar1').removeClass('hide');
        $('#sidebar1').addClass('show');
    }
}

$('#toggleSidebar').click(function() {
    if ($.asm.panels === 1) {
        $('#toggleSidebar').addClass('fa-backward');
        $('#toggleSidebar').removeClass('fa-forward');
        return sidebar(2);
    } else {
        $('#toggleSidebar').removeClass('fa-backward');
        $('#toggleSidebar').addClass('fa-forward');
        return sidebar(1);
    }
})

CSS:

#toggleSidebar {
  position:fixed;
  display:block;
  left:0;
  top:45px;
  color:#779DD7;
  padding:2px 4px;
}

hide {
    display: none;
}

show {
    display: inherit;
}

html:

<div class="container">
  <div class="row">
    <div class="col-md-3 hide" id="sidebar1">
      <div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">

        Toc goes here.

      </div>
    </div>

    <div class="col-md-12" id="content">

      Main text goes here.

    </div>

  </div>
  <a id="toggleSidebar" href="#toggleSidebar1" class="fa fa-forward"</a>
</div>

编辑:

Off canvas 不是我需要的:它不保留水平空间，它将 div 向右移动，并且 div 离开屏幕。将 col-md-9 更改为 col-md-12 并返回 -- 是我能想到的解决当前问题的最佳方法。这应该是简单的 javascript，我不擅长。

Answer 1

我认为您正在寻找“ Canvas 外”侧边栏。这里有 2 个从左侧滑入的 Canvas 外 Bootstrap 示例。

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook

两个示例都使用媒体查询来检测浏览器并相应地放置侧边栏。