我有一个带有可折叠侧边栏的引导页面我的可折叠侧边栏工作正常，但我不知道如何在侧边栏折叠处的可折叠侧边栏旁边连接切换按钮。
在我的小提琴中，它正在使用页面包装器部门，但我想在侧边栏部分旁边切换按钮附加..
我的要求是：在可折叠侧边栏旁边连接切换按钮，并使用侧边栏折叠..
我的代码：
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="scrollbar">
<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
<!-- -->
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>
<ul class="nav-pills nav-stacked" style="list-style-type:none;">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
</ul>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span> Shortcut</a>
<ul class="nav-pills nav-stacked" style="list-style-type:none;">
<li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>
<li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>
</ul>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
</li>
<li>
<a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
</li>
</ul>
</div><!-- /#sidebar-scroll -->
</div><!-- /#sidebar-wrapper -->
<div id="toggle24">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >
<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-chevron-right"></span></button>
</li>
</ul>
</div><!-- bs-example-navbar-collapse-1 -->
<!--</div>-->
<!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
<!--<ul class="nav navbar-nav">-->
<!--<li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-chevron-right"></span></button></li>-->
<!--</ul>-->
<!--</div><!– bs-example-navbar-collapse-1 –>-->
<!-- Page Content -->
<!--<div class="toggle-one">-->
<!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
<!--<ul class="nav navbar-nav">-->
<!--<li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"><span class="glyphicon glyphicon-chevron-right"></span></button></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
<!--<ul class="nav navbar-nav">-->
<!--<li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-chevron-right"></span></button></li>-->
<!--</ul>-->
<!--</div><!– bs-example-navbar-collapse-1 –>-->
<div class="col-lg-12">
<!--<h2>Enter your Contact Information in Below Form</h2>-->
<!--<p>This sidebar is adopted from <a href="http://startbootstrap.com/">start bootstrap simple sidebar</a>, which I modified slightly to be more cool. For tutorials and how to create it , you can read from my site </p>-->
<!--<a href="#menu-toggle" class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle2">Toggle Menu</a>-->
<div class="container">
<div class="row">
<!--<div class='col-xs-12 col-md-8 '>-->
<div class='col-xs-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2'>
<form role="form" id="contact_form">
<center> <h3> Contact Form</h3></center>
<h3><small>Please Fill your Information Here</small></h3><br>
<hr>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<div class="text-center">
<img src="//placehold.it/40" class="avatar img-rounded" alt="avatar">
<h6>Upload Photo</h6>
<input type="file" class="form-control" title= "browse" data-input="false" tabindex="1">
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<input required type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="2">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<input type="text" name="first_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="3">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<!--<input type="text" class="form-control" placeholder="mm-dd-yyyy" data-provide="datepicker" />-->
<input type="text" name="birthdate" id="birth_date" class="form-control input-lg" placeholder="mm-dd-yyyy" data-provide="datepicker" tabindex="4">
</div></div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<input type="text" name="time" id="time" class="form-control input-lg" placeholder="h:mm PM" tabindex="5">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="fathername" id="father_name" class="form-control input-lg" placeholder="Father Name" tabindex="1">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="mothername" id="mother_name" class="form-control input-lg" placeholder="Mother Name" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<!--<input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="Display Name" tabindex="3">-->
<textarea class="form-control input-md" id="address" rows="3" cols="70" placeholder="Address" tabindex="6"></textarea>
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email" tabindex="7">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="city" id="city" class="form-control input-lg" placeholder="City" tabindex="8">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="state" id="state" class="form-control input-lg" placeholder="State" tabindex="9">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="pincode" id="pincode" class="form-control input-lg" placeholder="Pin Code." tabindex="10">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="mobile" id="mobile" class="form-control input-lg" placeholder="Mobile No." tabindex="11">
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-6 col-md-6 "> <input type="submit" value="Save" class="btn btn-success" tabindex="12"></div>
</div>
</div>
<hr>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
<h1>Shrink Width to Collapse Sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>
<p>Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.</p>
<p>Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
quam, nec lacinia libero.</p>
<p>Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
Integer accumsan ac massa at tempus.</p>
</div><!--End of col-lg-12-->
</div>
</div>
<!-- /#page-content-wrapper -->
JS：
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
var icon = $(this).parent().find(".glyphicon")
if (icon.hasClass('glyphicon-chevron-right'))
icon.removeClass('glyphicon-chevron-right').addClass("glyphicon-chevron-left");
else
icon.removeClass('glyphicon-chevron-left').addClass("glyphicon-chevron-right");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
CSS：
html,
body{
/*background: #f3efe0;*/
/*background-color: #f3efe0;*/
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
/*background: url("../img/img/blue.jpg") no-repeat center center fixed;*/
/*-webkit-background-size: cover;*/
/*-moz-background-size: cover;*/
/*-o-background-size: cover;*/
/*background-size: cover;*/
}
#wrapper {
margin-top: 51px;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#wrapper.toggled #menu-toggle span:before {content:'\2212'}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0; /* disini agar ketika di kecilkan tidak hilang semua default 0*/
height: 100%;
margin-left: -250px;
overflow-x: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
.fixed-brand{
width: auto;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
/*top: 50px;*/
width: 250px;
margin: 0;
padding: 0;
list-style: none;
margin-top: 2px;
}
.sidebar-nav li {
text-indent: 15px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
border-left: red 2px solid;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.no-margin{
margin:0;
}
@media (min-width:768px) {
#wrapper {
padding-left: 42px;
}
.fixed-brand{
width: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 54px;
}
#sidebar-wrapper:hover {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-2 #sidebar-wrapper {
width: 250px;
}
/*#wrapper.toggled-2 #sidebar-wrapper:hover {*/
/*width: 250px;*/
/*}*/
#page-content-wrapper {
/*top:20px;*/
padding: 0px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #page-content-wrapper {
position: fixed;
margin-right: 0;
padding-left: 250px;
}
#wrapper.toggled-2 #page-content-wrapper {
position: relative;
margin-right: 0;
margin-left: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
::-webkit-scrollbar {
width: 5px;
color: white;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(118, 94, 224, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
background-color: gray;
}
#toggle24{
margin-right: 30%;
}
.container {
/*margin-left: 50%;*/
}
有没有人知道如何执行此操作：如何在可折叠侧边栏旁边附加切换按钮，按钮也应该使用侧边栏折叠..
这是我的：Fiddle