0

我有两个基于 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>

我想 divcollapseOne是隐藏collapseTwo的，默认是可见的。单击链接后Show brief，collapseTwo隐藏并collapseOne显示。

4

1 回答 1

0

只需使用他们随文档提供的示例。我在这里为你简化了它，确保你所有的 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>
于 2012-04-19T00:28:42.190 回答