当其他第二个打开时如何折叠部分？ （引导）

Question

如果打开大型业务部门，您将如何关闭小型业务部门，反之亦然？

即使在这篇文章的帮助下，我仍然无法得到它： 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>

Answer 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上的演示。