用于在宽屏幕上折叠Bootstrap SideBar的按钮

Question

我正在使用此模板：

https://bootsnipp.com/snippets/eNe4v

问题在于，我想通过在22英寸的电脑屏幕上点击一个按钮来缩小我的侧边栏或隐藏它。

我尝试了一些没有成功的事情。

我正在使用AngularJS，但也许应该有一个Jquery的解决方案？

当隐藏栏时，屏幕必须变大，就像在此模板中一样：

https://github.com/rdash/rdash-angular

但我不能使用这个，因为我不使用Gulp。

谢谢你，如果你有任何想法，祝你有愉快的一天。

当我用JQUERY隐藏SIDEBAR DIV时，我只有一个空格，而是其他div不会自动调整大小以适应所有宽屏：

Answer 1

你可以用一个简单的JS函数来实现这个目标

这是Example

$('#button').click(function () {
        $("#myDiv").animate({width:'toggle'},300); //300 is the speed (in ms)
    });

Answer 2

这是我在评论中提到的一个例子。单击按钮，jquery将从侧边栏中删除列类，然后隐藏侧边栏，并从内容中删除该类，即主要信息，并为该类提供12列。

这是一个Example

html

 <div class="container">
<div id="sidebar" class="col-sm-3">sidebar content</div>
<div id="content" class="col-sm-9"> <button type="button" onclick="myfunction()">hide the sidebar </button> </div> 
</div>

<强> jquery的

function myfunction(){
$("#sidebar").removeClass("col-sm-3");
$("#sidebar").hide();
$("#content").removeClass("col-sm-9");
$("#content").addClass("col-sm-12");
}