5

jsfiddle 68RXP の例を使用collapse-groupして、展開可能な div を作成しました。

HTML:

<div class="span4 collapse-group">
     <h2>Heading</h2>
     <p class="collapse">Lorem ipsum</p>
     <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

Javascript:

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});

をbtn押すと、pクラスの展開モードと折りたたみモードが切り替わります。

再帰的な折りたたみ可能な div に同じ概念を使用しようとしました。

<div class="collapse-group">
    <p><a class="btn" href="#">Open outer div &raquo;</a></p>
    <div class="collapse">
        <h2>Outer div title</h2>
        <p>Outer div text</p>
        <div class="collapse-group">
            <p><a class="btn" href="#">Open inner div &raquo;</a></p>
            <div class="collapse">
                <h2>Inner div title</h2>
                <p>Inner div text</p>
             </div>
         </div>
    </div>
</div>

以前と同じ js コードです。jsFiddle WdbUeを参照してください。

外側の折りたたみ可能な div を初めて開くと、内側の div も開かれます。各ボタンを単一の折りたたみ可能な divに結合するにはどうすればよいですか?expand

4

1 に答える 1

4

私はdata-toggle="collapse" data-target="#some_id"すべての折りたたみ可能なものに個別のIDを使用しましたdiv:

<div class="container">
    <div class="hero-unit">
        <h2>Bootstrap-jQuery collapse example</h2>
        <p>Based on <a href="http://jsfiddle.net/Sherbrow/68RXP/">fiddle 68RXP</a></p>  
        <div class="collapse-group">
            <p><a class="btn" data-toggle="collapse" data-target="#demoout">Open outer div &raquo;</a></p>
            <div class="collapse in" id="demoout">
                <h1>Outer div title</h1>
                <p>Outer div text</p>

                <div class="collapse-group">
                    <p><a class="btn" data-toggle="collapse" data-target="#demoin">Open inner div &raquo;</a></p>
                    <div class="collapse in"  id="demoin">
                        <h2>Inner div title</h2>
                        <p>Inner div text</p>

                     <div class="collapse-group">
                    <p><a class="btn" data-toggle="collapse" data-target="#demoinin">Open inner div &raquo;</a></p>
                    <div class="collapse in"  id="demoinin">
                        <h3>Inner-inner div title</h3>
                        <p>Inner-inner div text</p>
                    </div>
                    </div>    
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>

このjsコードで：

$(document).ready(function(){
          $(".collapse").collapse();
});

作業例: jsfiddle K63P3

クレジット: aximay@jsbin .

于 2013-03-21T11:12:25.327 に答える