我在我的頁面有四個按鈕,並點擊它們中的每一個,它應該顯示一個div,並且應該關閉打開的div。使用Bootstrap3 div的摺疊
我必須打開相應的div,但它沒有關閉那些打開的。
這裏是我做過到目前爲止http://www.bootply.com/DWw9JbGFex
感謝您的幫助提前代碼。
我在我的頁面有四個按鈕,並點擊它們中的每一個,它應該顯示一個div,並且應該關閉打開的div。使用Bootstrap3 div的摺疊
我必須打開相應的div,但它沒有關閉那些打開的。
這裏是我做過到目前爲止http://www.bootply.com/DWw9JbGFex
感謝您的幫助提前代碼。
綁定到崩潰事件並使用jQuery隱藏其餘的可摺疊元素將會訣竅。見Boostrap javascript docs
var $sharegroup = $('#sharegroup');
$sharegroup.on('show.bs.collapse','.collapse', function() {
$sharegroup.find('.collapse.in').collapse('hide');
});
查看更新bootply
http://www.bootply.com/5oGRhtqdfw
簡單的隱藏/顯示使用jQuery /引導:
HTML
<button type="button" class="btn btn-primary div-toggler" name="div1">Expose Div 1</button>
<button type="button" class="btn btn-primary div-toggler" name="div2">Expose Div 2</button>
<button type="button" class="btn btn-primary div-toggler" name="div3">Expose Div 3</button>
<button type="button" class="btn btn-primary div-toggler" name="div4">Expose Div 4</button>
<div id="div1" class="target-div" style="display: none;" >Div 1</div>
<div id="div2" class="target-div" style="display: none;" >Div 2</div>
<div id="div3" class="target-div" style="display: none;" >Div 3</div>
<div id="div4" class="target-div" style="display: none;" >Div 4</div>
的JavaScript
$(document).ready(function() {
$('.div-toggler').click(function (e) {
var btnName = $(e.currentTarget).prop('name');
$('.target-div').hide();
$('#' + btnName).fadeIn(300);
});
});