[英]Change column width on click in bootstrap 3
單擊側邊欄時如何切換一列的大小?
我正在開發一個應用程序,其中一列中有地圖,右側有第二列顯示信息。 激活時有一個從右側滑入的側邊欄。
當側邊欄擴展時,帶地圖的主列是col-lg-6,右邊的列是col-lg-4
現在,當通過單擊按鈕關閉側邊欄時,我想映射列以切換到 col-lg-8。 有沒有辦法做到這一點?
頁面和側邊欄的代碼:
<div id="container">
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-heading">
<h3 class="panel-title">Projects
<button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-8 col-md-8">
<input type="text" class="form-control search" placeholder="Filter" />
</div>
<div class="col-xs-4 col-md-4">
<button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i> Sort</button>
</div>
</div>
</div>
<div class="sidebar-table">
<table class="table table-hover" id="feature-list">
<thead class="hidden">
<tr>
<th>Icon</th>
<tr>
<tr>
<th>Name</th>
<tr>
<tr>
<th>Chevron</th>
<tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left:0px;">
<div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;">
<div id="map"></div>
</div>
<div class="col-xs-6 col-lg-4" style="padding-top:0px">
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-2x"></i>
</div>
<div class="panel-body" style="text-align:center">
<div id="chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-list fa-2x"></i>
</div>
<div class="panel-body" style="text-align:left">
<div id="projects"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
側邊欄和菜單按鈕的激活代碼:
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 50; // Calculate the top offset
$('#map').css('height', (h - offsetTop));
}).resize();
$("#list-btn").click(function() {
$('#sidebar').toggle();
map.invalidateSize();
return false;
});
$("#sidebar-toggle-btn").click(function() {
$("#sidebar").toggle();
map.invalidateSize();
return false;
});
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
map.invalidateSize();
});
編輯
我曾嘗試使用 toggleClass 和 addClass/removeClass 但它不起作用。 這是一個 jsfiddle,用於顯示側邊欄隱藏時會發生什么。
試試這種技巧:
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
$('#mapDiv').removeClass('col-lg-6');
$('#mapDiv').addClass('col-lg-8');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.