摺疊側面板

Question

如何在較小的屏幕上查看時摺疊側面板，以便「面板標題」變爲切換按鈕。即，而不是漢堡按鈕，得到「過濾學生」按鈕，這將擴大「面板身體」。

<div class="panel"> 
    <div class="panel-header"> 
    <h3 class="panel-title">Filter Students</h3> 
    </div> 
    <div class="panel-body"> 
    <div class="search"> 
     <h3>SEARCH KEYWORD</h3> 
     <input type="text" class="search-box" placeholder="Search" /> 
    </div> 
<div class="filter-categories"> 
    <ul class="filter"> 
     <li>Graphic Design</li> 
     <li>Online Marketing</li> 
     <li>Video Commercials</li> 
     <li>Technology</li> 
     <li>Photography</li> 
     <li>Translation</li> 
    </ul> 
</div>     
</div> 
</div> 

Answer 1

這裏是你如何能做到這與jQuery toggleClass一個例子。當視口縮小到768px以下時，側邊欄隱藏，並且可以在點擊較大的視口時隱藏（如果需要，可以禁用該視口）。

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

body, 
 
html { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#wrapper { 
 
    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; 
 
} 
 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    background: #DB1849; 
 
    -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; 
 
} 
 
.btn-default#menu-toggle, 
 
.btn-default#menu-toggle:hover, 
 
.btn-default#menu-toggle:focus { 
 
    border: none; 
 
    outline: none; 
 
    box-shadow: none; 
 
    background: none; 
 
    color: #DB1849; 
 
} 
 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #ddd; 
 
} 
 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #444; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 
.sidebar-nav .sidebar-brand { 
 
    text-align: left; 
 
} 
 
.sidebar-nav .sidebar-brand img { 
 
    width: 75px; 
 
} 
 
.sidebar-nav ul { 
 
    list-style: none; 
 
    list-style-position: outside; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.sidebar-nav ul > li { 
 
    font-size: 13px; 
 
} 
 
.sidebar-nav ul > li > a { 
 
    color: #ddd; 
 
    text-decoration: none; 
 
    padding-left: 10px; 
 
} 
 
.sidebar-nav ul > li > a:hover { 
 
    color: #fff; 
 
    background: rgba(255, 255, 255, 0.6); 
 
} 
 
@media(min-width:768px) { 
 
    #sidebar-wrapper { 
 
    width: 250px; 
 
    } 
 
    #wrapper { 
 
    padding-left: 250px; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <ul class="sidebar-nav"> 
 
     <li class="sidebar-brand"> 
 
     <img src="http://kodi.wiki/images/c/c1/Thumbnail-light-transparent.png" alt="KODI"> 
 
     </li> 
 
     <li> <a href="#">Home</a> 
 

 
     </li> 
 
     <li> <a href="#nope" data-toggle="collapse" data-target="#drop1"> Something<span class="caret"></span></a> 
 

 
     <ul id="drop1" class="collapse" data-parent="#sideNavParent"> 
 
      <li><a href="about-us">Something</a> 
 

 
      </li> 
 
      <li><a href="our-journey">Something</a> 
 

 
      </li> 
 
      <li><a href="where-we-are-going">Something</a> 
 

 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="what-we-do">Something</a> 
 

 
     </li> 
 
     <li><a href="the-building">Something</a> 
 

 
     </li> 
 
     <li><a href="volunteer">Something</a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> <a href="#" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a> 
 

 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <h1>KODI</h1> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /#page-content-wrapper --> 
 
</div> 
 
<!-- /#wrapper -->