Question

再次单击按钮时，我需要帮助折叠div。

我有这段代码：

＆＃13;

$('#btn1').click(function() {
  $('.collapse').hide();
  $('#demo').show();
});
$('#btn2').click(function() {
  $('.collapse').hide();
  $('#demo1').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo" id="btn1">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse">
    1st div
  </div>
  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

＆＃13;

从这里开始：Bootstrap Collapse with multiple button and div

当单击button2并扩展div2时，此代码可以工作并隐藏div1，但是当再次单击button2时它不会隐藏div2。

有没有办法在单击button1时显示div1并在单击button2时隐藏div1并展开div2。但是当再次单击button2时，它会隐藏div2，因此所有可折叠的div都会折叠，这种行为也适用于button1和div1。

Answer 1

＆＃13;

$('#btn1').click(function(){
 // $('.collapse').hide();
  $('#demo1').hide();
  $('#demo').show();
});
$('#btn2').click(function(){
  //$('.collapse').hide();
  $('#demo').hide();
  $('#demo1').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container" ng-app="myApp" ng-controller="customersCtrl">
    <button type="button" class="btn btn-default" data-toggle="collapse" data-
    target="#demo" id="btn1" >Company Details</button>
      <button type="button" class="btn btn-default" data-toggle="collapse" data-
    target="#demo1" id="btn2">Commercial Details</button>
      <div id="demo" class="collapse" >
        1st div
      </div>

      <div id="demo1" class="collapse">
        2nd div
      </div>
    </div>

＆＃13;

Answer 2

像这样更新您的脚本

$('#btn1').click(function(){

      if($('#demo').is(':visible')){
           $('#demo').hide();
      }else{
          $('#demo1').hide();
          $('#demo').show();

      }

    });
    $('#btn2').click(function(){

      if($('#demo1').is(':visible')){
           $('#demo1').hide();
      }else{
           $('#demo').hide();
          $('#demo1').show();
      }
    });

Answer 3

我建议您先隐藏div，然后再使用toggle

Stack Snippet

$('#demo1,#demo').hide()
$('#btn1').click(function() {
  $('#demo1').hide();
  $('#demo').toggle();
});
$('#btn2').click(function() {
  $('#demo').hide();
  $('#demo1').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo" id="btn1">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse">
    1st div
  </div>
  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

使用多个按钮和div展开和折叠

3 个答案: