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手风琴折叠功能

回答

相关问题