Question

我已尝试过以前在同类问题上发布的所有答案。基本上我希望这两个按钮在一行中，并且其中只有一个应该一次崩溃。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
  <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
  <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
  <div class="accordion-group">
    <div class="collapse" id="sample1">
      <h1> here comes the sample1</h1>
    </div>
    <div class="collapse" id="sample2">
      <h1> here comes the sample2</h1>
    </div>
  </div>
</div>

＆＃13;

Answer 1

你为什么不看这个：）

$(document).ready(function(){
$(".b1").click(()=>{
$("#menu2").hide();
$("#menu1").show();
 });
  $(".b2").click(()=>{
$("#menu2").show();
$("#menu1").hide();
})

}）;

https://jsbin.com/tikajukexe/edit?html,js,output

Answer 2

How Bootstrap v3 implements the accordion is somewhat of a blackbox (unless you really dig into the logic of the JS behind the scenes). However, this is what I understand based on some testing:

The controls can be arbitrarily nested
The accordion elements must be wrapped by a <div> with the class of .panel
The wrapper divs must be:
- siblings of each other and
- the direct descendent of the element specified in data-parent attribute (e.g. #accordion in your example), without any additional nesting

With that in mind, here are some changes you can make to your original DOM:

Move the #accordion ID to the wrapper of the panels
The controls can be positioned anywhere on the page, as long as data-toggle="collapse" anddata-parent="#accordion`" is declared ;)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--
  Controls can be arbitrarily nested, no problem
  As a proof-of-concept, I have nested them three <div>s deep :) 
-->
<div><div><div>
  <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
  <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
</div></div></div>

<div id="accordion" class="accordion-group">

  <!-- Panel elements must be direct child of data-parent (#accordion) -->
  <div class="panel">
    <div class="collapse" id="sample1">
      <h1> here comes the sample1</h1>
    </div>
  </div>

  <div class="panel">
    <div class="collapse" id="sample2">
      <h1> here comes the sample2</h1>
    </div>
  </div>

</div>

Answer 3

使用默认的bootstrap折叠无法做到这一点。你可以做的是添加一个新的jquery动作，如下所示：

CancellationToken.None

这样做的目的是，当你点击另一个时它可见，它会触发另一个的折叠以隐藏它。

Answer 4

好吧，我会告诉你一个通用的方法来使用JQ

String

$(document).ready(function(){
function DataBindMenu(container){
 var menuButtons = $(container).find("a[type='button']");
 menuButtons.click(function(){
 $(container).find(".collapse").hide("slow"); // collapse all;
 // now lets view the right sample
 var sampleId = $(this).attr("aria-controls");
 $("#" + sampleId).show("slow");
 
 });

}

DataBindMenu("#accordion");

});

希望这能帮到你，我从不喜欢使用bootstrap

当其他div扩展bootstrap时，Div不会崩溃

4 个答案: