Twitter Bootstrap手风琴折叠功能

Question

我正在使用 Twitter Bootstrap 的 CSS 和 JS 框架。在这个例子中，我有两个可折叠的 div，分别是 #about 和 #videos。

目前，这两个 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 -->

- pjmil

---

你使用的是哪个版本的Bootstrap？ - João Silva

检查他们的示例代码：http://twitter.github.com/bootstrap/javascript.html#collapse，似乎他们在元素上有许多类别，如“accordion”等，在您的代码中不存在。不确定这些是否百分之百需要，但值得一看。 - Billy Moat

Answer 1

我通过遵循Bootstrap示例，成功使其工作。必须使用data-parent标签而不是data-target。

这是可工作的示例：

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

- pjmil