Question

我有两个基于twitter bootstrap的可折叠div A（collapseOne）和B（collapseTwo）。当B展开时，如何使A折叠，反之亦然？

我的代码如下所示，

 <div class="shop-details" id="shop-accordion">
      <div id="collapseOne" class="shop-brief clearfix collapse hide">
          <h2 class="yahei ft30">MyName</h2>
          <span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseOne"><i class="path-down"></i>Show details</a></span>
      </div>
      <dl id="collapseTwo" class="shop-ds clearfix collapse in">
           <dt>
                <a href="#" target="_parent"><img src="images/pt-small.jpg" width="246" height="169"></a>
                <div class="shop-ds-txt">
                     <h2 class="yahei ft30">MyName</h2>
                     <ul class="shop-ds-ul">
                         <li>Item1</li>
                         <li>Item2</li>
                         <li>Item3</li>
                         <li>Item4</li>
                         <li>Item5</li>
                     </ul>
                 </div>
            </dt>
            <dd>
               <div class="unfold-positon">
                     <div><span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseTwo"><i class="path-up"></i>Show brief</a></span></div>
               </div>
           </dd>
      </dl>

  </div>

我想隐藏div collapseOne，默认情况下collapseTwo可见。点击链接Show brief后，隐藏collapseTwo并显示collapseOne。

Answer 1

只需使用sample they provide with the documentation即可。我在这里为你简化了一下，确保你所有的div都有相同的data-parent才能充当手风琴。

<div class="accordion" id="my-accordion">
    <div class="accordion-group">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseOne">
              Toggle 1
        </a>
        <div id="collapseOne" class="accordion-body in" style="height: auto; ">
            <div class="accordion-inner">
                Inner content 1
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordian" href="#collapseTwo">
           Toggle 2
        </a>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
              Inner content 2
            </div>
        </div>
    </div>            
</div>

如何使两个可折叠的div互斥

1 个答案: