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

【问题标题】：How to make two collapsible div mutually exclusive如何使两个可折叠的div互斥
【发布时间】：2012-04-18 16:28:38
【问题描述】：

我有两个基于 twitter 的 bootstrap 的可折叠 div A(collapseOne) 和 B(collapseTwo)。如何让A在B展开时折叠起来，反之亦然？

我的代码如下所示，

 <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。

【问题讨论】：

向我们展示您的 JavaScript。听起来您想要类似“手风琴”的功能，但不是很清楚。
@Rob，更新了我的问题。添加代码sn-p。
@Kane 为什么要使用定义列表进行设置？
他没有展示任何 JS，因为 Bootstrap 不需要你使用任何 JS。他们提供仅使用标记的选项（data-attribute、data-toggle 等）

标签： javascript twitter-bootstrap

【解决方案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>

【讨论】：

我明白你的意思。但我期望的是在扩展“内部内容 1”时折叠“内部内容 2”。任何时候都只会展开两个内部内容中的一个。
这正是我发布的解决方案，它在网络界面世界中被称为手风琴。