使用Bootstrap3 div的折叠

Question

我在我的页面有四个按钮，并点击它们中的每一个，它应该显示一个div，并且应该关闭打开的div。

我必须打开相应的div，但它没有关闭那些打开的。

这里是我做过到目前为止http://www.bootply.com/DWw9JbGFex

感谢您的帮助提前代码。

Answer 1

绑定到崩溃事件并使用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

Answer 2

简单的隐藏/显示使用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); 
    }); 
});