angularjs 如何在其他秒打开时折叠节?(Bootstrap)

y3bcpkx1  于 2022-11-28  发布在  Angular
关注(0)|答案(1)|浏览(133)

当一个人打开大商业区时,你如何让小商业区关闭,反之亦然?
即使有这篇文章的帮助,我仍然无法得到它: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>
2mbi3lxu

2mbi3lxu1#

Bootstrap的Accordion行为仅适用于.panel,因此您需要使用问题中提到的链接中提到的JavaScript方法之一。
例如,在控件和节周围添加一个 Package 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上的演示。

相关问题