Question

我尝试创建一个响应式网格来显示点击时显示详细信息的项目，我可以让它扩展，但我的问题是单击旁边的元素折叠了展开的内容，我不会＆＃39 ; t想要那个，我想把所有项目保持在最顶层并将内容扩展到

之下

以下是我现在所拥有的：

$(document).ready(function(){
$("#btn").click(function(){
    $("#toggleDemo").collapse('toggle');
});
 $("#btn2").click(function(){
    $("#toggleDemo2").collapse('toggle');
});
 $("#btn3").click(function(){
    $("#toggleDemo3").collapse('toggle');
});});

HTML：

<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" id="btn" class="btn btn-primary" value="Toggle Button">
  <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. </div>
<input type="button" id="btn2" class="btn btn-primary" value="Toggle Button 2">
  <div id="toggleDemo2" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript.</div>
<input type="button" id="btn3" class="btn btn-primary" value="Toggle Button 3">
<!-- Collapsible Element HTML -->
<div id="toggleDemo3" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. </div>

如果您对如何完成它有任何想法，请告诉我

Answer 1

试试这个，

您甚至不需要JavaScript

<div>
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" value="Toggle Button">
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample2" value="Toggle Button 2">
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample3" value="Toggle Button 3">
</div>      

<div class="collapse" id="collapseExample">
    content
</div>
<div class="collapse" id="collapseExample2">
    content 2
</div>
<div class="collapse" id="collapseExample3">
    content 3
</div>

Demo in fiddle

Answer 2

这可以使用自定义Jquery代码而不是bootstrap。检查以下代码

<强> Jquery的

$(document).ready(function(){
  $(".btn-primary").click(function(){
      $(this).next('.collapse').slideToggle();
  });
});

<强> HTML

<div class="collapses-panel">
  <input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" value="Toggle Button">

  <div class="collapse" id="collapseExample">
    content
  </div>
  <input type="button" id="btn2" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample2" value="Toggle Button">
  <div class="collapse" id="collapseExample2">
    content 2
  </div>
  <input type="button" id="btn3" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample3" value="Toggle Button">

<div class="collapse" id="collapseExample3">
  content 3
</div>
</div>

<强> CSS

.collapses-panel {
  position: relative;
}
.btn-primary{
  display: block;
}
.collapse {
  display: none;
  background-color: gray;
}
@media (min-width: 768px) {
  .collapse {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
  }
  .btn-primary{
    display: inline-block;
  }
}

演示小提琴：http://jsfiddle.net/nikhilvkd/ft4mnynh/7/

如何创建具有全宽内容的Bootstrap可折叠面板而不折叠其他列？

2 个答案: