其他秒打开时如何折叠部分？（引导程序）答案

【问题标题】：How to collapse section when other second opens? (Bootstrap)其他秒打开时如何折叠部分？（引导程序）
【发布时间】：2018-08-05 10:44:41
【问题描述】：

当一个人打开大企业部分时，你如何让小企业部分关闭，反之亦然？

即使在这篇文章的帮助下，我仍然无法得到它： Bootstrap: Collapse other sections when one is expanded

下面是我的代码：

<div class="row justify-content-center">
   <div class="col-md-6 col-sm-10">
       <div>
         <button class="btn dropdown" data-toggle="collapse" data target="#small" data-parent="#smb" aria-expanded="false">
            Small Business</button>
        </div>
    </div>

    <div class="col-md-6 col-sm-10" id="business">
      <div>
        <button class="btn dropdown" data-toggle="collapse" data-target="#big" data-parent="#smb" aria-expanded="false">
          Big Business</button>
      </div>
    </div>
  </div>
  <div id="smb">
    <div class="collapse" id="small">
      <h1>Generate New Growth</h1>      
    </div>
    <div class="collapse" id="big">   
      <h1>Propagate More Growth</h1>        
    </div>
</div>

【问题讨论】：

标签： angularjs twitter-bootstrap-3 collapse

【解决方案1】：

Bootstrap 的 Accordion behavior 仅适用于 .panel，因此您需要使用问题中提到的链接中提到的 JavaScript 方法之一。

例如。在控件和部分周围添加一个包装 div：

<div id="smb">
  <div class="row justify-content-center">
    <div class="col-md-6 col-sm-10">
      <div>
        <button class="btn dropdown" data-toggle="collapse" data-target="#small" data-parent="#smb" aria-expanded="false">
            Small Business</button>
      </div>
    </div>

    <div class="col-md-6 col-sm-10" id="business">
      <div>
        <button class="btn dropdown" data-toggle="collapse" data-target="#big" data-parent="#smb" aria-expanded="false">
          Big Business</button>
      </div>
    </div>
  </div>
  <div>
    <div class="collapse" id="small">
      <h1>Generate New Growth</h1>
    </div>
    <div class="collapse" id="big">
      <h1>Propagate More Growth</h1>
    </div>
  </div>
</div>

JavaScript (jQuery)：

var $myGroup = $('#smb');
$myGroup.on('show.bs.collapse', '.collapse', function() {
    $myGroup.find('.collapse.in').collapse('hide');
});

jsfiddle 上的演示。

【讨论】：