4

Twitter ブートストラップ css および js フレームワークを使用しています。この例では、2 つの折りたたみ可能な div と .

現在、両方の div を同時に展開できます。

一度に展開できる div は 1 つだけです。たとえば、#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 -->
4

1 に答える 1

5

ブートストラップの例に従って動作させることができました。data-target の代わりに data-parent タグを使用する必要がありました。

これが実際の例です。

<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-23T12:06:58.527 に答える