javascript 在 bootstrap3 中切换侧边栏？

Toggle sidebar in bootstrap3?

提问by Adobe

I'm trying to get a togglable sidebar:

我正在尝试获得一个可切换的侧边栏：

No sidebar:

没有侧边栏：

>> | Main text
   | goes here

With sidebar:

带侧边栏：

H1 << | Main text
H2    | goes here

(here is an example of the behaviour: http://pythonhosted.org/cloud_sptheme-- see the button on sidebar. It's not easy to use its code base, because it's not bootstrap-based)

（这里是行为的一个例子：http: //pythonhosted.org/cloud_sptheme——见侧栏上的按钮。使用它的代码库并不容易，因为它不是基于引导程序的）

I started from a working example which uses Bootstrap 2 and jQuery 1.8: jsfiddle, SO question, and tried to make it work on Bootstrap 3. Here's a code (code on bootply):

我从一个使用 Bootstrap 2 和 jQuery 1.8 的工作示例开始：jsfiddle，SO question，并试图使其在 Bootstrap 3 上工作。这是一个代码（bootply上的代码）：

javascript:

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:

css：

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

hide {
    display: none;
}

show {
    display: inherit;
}

html:

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>

Edit:

编辑：

Off canvas is not what I need: it doesn't conserve the horizonatal space, it shifts the div to the right, and the div gets out of the screen. Chanding col-md-9to col-md-12and back -- is the best thing I can think of for a problem at hand. This should be simple javascript, which I'm not good at.

Off canvas 不是我需要的：它不保留水平空间，它将 div 向右移动，并且 div 离开屏幕。Chanding col-md-9to col-md-12and back - 是我能想到的解决手头问题的最好办法。这应该是简单的javascript，我不擅长。

采纳答案by Adobe

Oh I solved it:

哦，我解决了：

js:

js：

$(document).ready(function(){

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

    $('#toggleSidebar').click(function(){
        if ($.asm.panels === 1) {
            $('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-backward'});
            $('#content').attr({'class': 'col-md-9'});
            $('#sidebar1').show();
            $.asm.panels = 2;
        } else {
            $('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-forward'});
            $('#content').attr({'class': 'col-md-12'});
            $('#sidebar1').hide();
            $.asm.panels = 1;
        }
    });
});

css:

css：

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

html:

html：

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

        Toc goes here.

      </div>
    </div>

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

      Main text goes here.

    </div>

  </div>
  <button type="button" id="toggleSidebar" class="btn btn-primary"><span class="glyphicon glyphicon-backward"></span></button>
</div>

Demo on bootply.

bootply 上的演示。

回答by Zim

I think you're looking for a "off-canvas" sidebar. Here are 2 off-canvas Bootstrap examples that slide in from the left..

我认为您正在寻找“非画布”侧边栏。这是从左侧滑入的 2 个画布外 Bootstrap 示例。

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

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

Both example use media queries to detect the browser and place the sidebar accordingly.

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

回答by Anton Boritskiy

Have a look at http://getbootstrap.com/examples/offcanvas/. It is an offcanvas example made by bootstrap itself.

看看http://getbootstrap.com/examples/offcanvas/。这是一个由 bootstrap 本身制作的 offcanvas 示例。

I also love this article http://jasonweaver.name/lab/offcanvas/.

我也喜欢这篇文章http://jasonweaver.name/lab/offcanvas/。