Javascript Bootstrap - 用图标切换侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36128658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Toggle sidebar with icons
提问by ayasha
I have such a layout:
我有这样的布局：
I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like thisbut I don't understand how to make it work.
我希望当单击橙色按钮时，侧边栏会缩小并只留下图标可见。对于移动设备应该完全缩小，当单击按钮时，只有图标应该可见。行为应该像这样，但我不知道如何使它发挥作用。
For now I have my header:
现在我有我的标题：
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
<a class="navbar-brand" href="#">...</a>
</div>
But I don't know how to make it collapse when one clicks.. Thanks
但是我不知道如何让它在单击时崩溃..谢谢
回答by Zim
Update 2019
2019 年更新
Bootstrap 4
引导程序 4
This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.
这在 Bootstrap 4 中也是可能的，但仍然需要额外的 CSS 来处理侧边栏状态。
https://www.codeply.com/p/e5IcpodgE2
https://www.codeply.com/p/e5IcpodgE2
Bootstrap 3
引导程序 3
You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.
您可以创建一个“off canvas”侧边栏，然后使用 Bootstrap 的响应式实用程序类来切换图标的显示。
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
<li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
<li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
<li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
</ul>
</div>
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a>
<p>
content...
</p>
</div>
</div>
</div>
回答by CalCon
In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.
以粗略的方式，您可以分配 2 个类（一个用于图标，一个用于相关文本），例如“图标”类和“文本”类，然后单击按钮，切换（隐藏和显示）具有类的元素“文本”。然后在回调中，您可以动画调整侧边栏的大小。
Edit2: Improved example
Edit2：改进的例子
$('#togglebutton').click(function() {
if ($(window).width() > 500) { //your chosen mobile res
$('.text').toggle(300);
} else {
$('.menu').animate({
width: 'toggle'
}, 350);
}
});?.wrapper { width: 100% }
.menu {
background: #222;
float: left;
display: block;
}
.icon { max-width: 1em }
.menu ul {
list-style-type: none;
margin: 0;
padding: 0.2em 0.5em;
}
.menu li { margin: 0 }
.menu a, .menu a:visited {
color: white;
text-decoration: none;
}
.text {
display: inline;
margin: 0;
}
.content { display: block; }
button { margin: 1em; }
@media only screen and (max-width: 500px) {
.text {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu">
<ul>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 1</p>
</a>
</li>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 2</p>
</a>
</li>
</ul>
</div>
<div class="content">
<button id="togglebutton">☰</button>
</div>
</div>Hope it was useful to have a general idea of my suggestion.
希望对我的建议有一个大致的了解是有用的。
