Twitter bootstrap手風琴摺疊功能

我正在使用twitter bootstrap css和js框架。在這個例子中，我有兩個可摺疊的div，和。Twitter bootstrap手風琴摺疊功能

目前這兩個div可以同時擴展。

我希望他們工作的方式是一次只能擴展一個div。例如。如果#about被展開並且用戶點擊#videos，#about將被摺疊並且#videos將在其位置展開。

有沒有簡單的方法來做到這一點？

<div id="main" class="span12"> 
     <div class="row"> 

     <div class="span4"> 
      <a href="#" data-target="#about" data-toggle="collapse"> 
       <div class="unit red bloat"> 
        <h3>About</h3> 
        <p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p> 

       </div> 
      </a> 
     </div> 

     <div class="span4"> 
      <a href="#" data-target="#videos" data-toggle="collapse"> 
       <div class="unit red bloat"> 
        <h3>Videos</h3> 
        <p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p> 

       </div> 
      </a> 
     </div> 

     <div class="span4"> 
      <a href="forums/index.php"> 
       <div class="unit grey bloat"> 
       <h3>Forum</h3> 
        <p>If you think you'd fit in here, click this box and sign up to our forum. </p> 

       </div> 
      </a> 
     </div> 

</div><!-- end row --> 

      <br /> 
      <br /> 

      <div class="row-fluid"> 
       <div class="span12"> 

       <!-- start accord --> 

     <div id="about" class="collapse"> 
      <div class="row-fluid"> 
       <div class="expanded"> 
        <p>about</p> 
       </div> 
      </div> 
     </div> 

     <div id="videos" class="collapse"> 
      <div class="row-fluid"> 
       <div class="expanded"> 
        <p>vid</p> 
       </div> 
      </div> 
     </div> 



       <!-- end accord --> 

       </div> 
      </div> 






     <hr><!-- Bottom border --> 



    </div> <!-- /container -->

來源

2012-08-23 pjmil

您使用的是什麼版本的Bootstrap？ –

Bootstrap v2.0.3 – pjmil

在他們的例子中查看代碼：http://twitter.github.com/bootstrap/javascript.html#collapse看起來他們有很多類，比如'手風琴'等等，不會出現在你的代碼中。不知道這些是100％需要，但可能值得一看。 –

我能夠通過遵循引導示例使其工作。必須使用數據父標記而不是數據目標。

以下是工作示例;

<div id="main" class="span12"> 
    <div class="row"> 
     <div class="span4"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       <div class="unit grey bloat"> 
        <h3>Heading 1</h3> 
        <p>Paragraph 1</p> 
       </div> 
      </a> 
     </div> 
     <div class="span4"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       <div class="unit grey bloat"> 
        <h3>Heading 2</h3> 
        <p>Paragraph 2</p> 
       </div> 
      </a> 
     </div> 
     <div class="span4"> 
      <a href="#"> 
       <div class="unit grey bloat"> 
        <h3>Heading 3</h3> 
        <p>Paragraph 3</p> 
       </div> 
      </a> 
     </div> 
    </div> 

    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="accordion" id="accordion2"> 
       <div class="accordion-group"> 
        <div id="collapseOne" class="accordion-body collapse"> 
         <div class="accordion-inner"> 
          <div class="expanded"> 
           <p>Expanded 1</p> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div id="collapseTwo" class="accordion-body collapse"> 
         <div class="accordion-inner"> 
          <div class="expanded"> 
           <p>Expanded 2</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> <!-- /container -->

來源

2012-08-23 12:06:58 pjmil

Twitter bootstrap手風琴摺疊功能

回答

相關問題