jquery - 在 Bootstrap 中创建侧边菜单？

Question

我在网上找到了几个展示如何构建侧边可折叠菜单的主题，但是所有这些都需要大量代码，我只需要显示或隐藏特定的 div，特别是我有这样的结构:

<div class="row">
    <div class="col-md-2">
        <div class="well">
            <span><b>Resources</b></span>
            <form class="form-inline">
                <input type="text" placeholder="type text here"
                       class="form-control" id="resource_filter" />
                <button class="clear btn btn-default btn-sm" type="button"
                        title="clean">
                    <span class="glyphicon glyphicon-repeat"></span>
                </button>
            </form>
        </div>
    </div>
    <div class="col-md-10">
        <div id="calendar" class="well"></div>
    </div>
</div>

我想显示或隐藏带有 col-md-2 类的 div，因此最后一个 div (col-md-10) 可以具有最大宽度尺寸。我怎样才能做到这一点？

Answer 1

你说你想要这样的东西吗？请全屏观看。

1. 使用隐藏类切换侧边栏。
2. 使用 col-XX-12 或 col-XX-10 类切换主栏。

片段

$(function () {
  $("#btnShoHide").click(function () {
    $(".hideable-sidebar").toggleClass("hidden");
    $(".expandable-main").toggleClass("col-xs-10 col-xs-12");
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-2 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <input type="text" placeholder="type text here"
                 class="form-control" id="resource_filter" />
          <button class="clear btn btn-default btn-sm" type="button"
                  title="clean">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>
        </form>
      </div>
    </div>
    <div class="col-xs-10 expandable-main">
      <div id="calendar" class="well">
        <input type="button" class="btn btn-default" value="Show or Hide" id="btnShoHide" />
      </div>
    </div>
  </div>
</div>