Javascript 在bootstrap3中切换侧栏？

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

无侧边栏：

>> | Main text
   | goes here

带侧边栏：

H1 << | Main text
H2    | goes here

css:

html:

Toc在这里。
正文在这里。
我想你正在寻找一个“非画布”侧边栏。这里有两个从左边滑入的非画布引导示例


这两个示例都使用媒体查询来检测浏览器并相应地放置侧边栏。
我认为您正在寻找“非画布”侧边栏。这里有两个从左边滑入的非画布引导示例


这两个示例都使用媒体查询来检测浏览器并相应地放置侧栏。
请查看。这是一个由bootstrap本身制作的非画布示例

我也喜欢这篇文章。
看一看。这是一个由bootstrap本身制作的非画布示例

我也喜欢这篇文章。
哦，我解决了它：

js:

css:

html:


Toc在这里。
正文在这里。

.
哦，我解决了这个问题：

js:

css:

html:


Toc在这里。
正文在这里。

.
看来你已经把事情复杂化了。忘记它或任何网站是如何做到的。只需在侧边栏div上调用
.toggle（）
。@Timmerz:你能在bootply上开发一个小的工作示例吗？你有两个div，对吗？在侧边栏div中放置折叠按钮，在内容div中放置展开按钮。单击其中一个，在侧栏上调用
。切换
，并在侧栏打开时隐藏展开按钮…添加一点css。就这么简单。@Timmerz:在我看来，这或多或少与我在上面尝试过的方法相同。只是你建议用两个按钮而不是一个。我认为这种方法很好，任何一个在调试javascript方面有经验的人都可以在一瞬间解决它。除了它不适合你，你有一大堆addClass和removeClass以及1和2。那是什么？简化，我的朋友。简化。看起来你已经把它复杂化了。忘记它或任何网站是如何做到的。只需在侧边栏div上调用
.toggle（）
。@Timmerz:你能在bootply上开发一个小的工作示例吗？你有两个div，对吗？在侧边栏div中放置折叠按钮，在内容div中放置展开按钮。单击其中一个，在侧栏上调用
。切换
，并在侧栏打开时隐藏展开按钮…添加一点css。就这么简单。@Timmerz:在我看来，这或多或少与我在上面尝试过的方法相同。只是你建议用两个按钮而不是一个。我认为这种方法很好，任何一个在调试javascript方面有经验的人都可以在一瞬间解决它。除了它不适合你，你有一大堆addClass和removeClass以及1和2。那是什么？简化，我的朋友。简化
$.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);
    }
})

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

hide {
    display: none;
}

show {
    display: inherit;
}

<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>

$(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;
        }
    });
});

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

<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>