0

Twitter のbootstrapに基づいた 2 つの折りたたみ可能な 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、デフォルトで表示されます。link をクリックした後Show brief、collapseTwo非表示にしてcollapseOneを表示します。

4

1 に答える 1

0

ドキュメントで提供されているサンプルを使用してください。ここでは単純化しましdata-parentた。アコーディオンとして機能するために、すべての div が同じであることを確認してください。

<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 に答える