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

Question

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

我有这个代码:

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

<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>

来自这里:Bootstrap Collapse with multiple button and div

此代码有效并在单击 button2 时隐藏 div1 并展开 div2，但在再次单击 button2 时它不会隐藏 div2。

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

Answer 1

像这样更新你的脚本

$('#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();
      }
    });