多级可折叠/手风琴可无限进行而不会破坏表内容

时间:2018-11-20 07:56:31

标签: javascript html css twitter-bootstrap

我正在尝试制作一个多层次的手风琴,其中的表可以有多个层次。 this is my requirement

我仍然是菜鸟,所以我在代码笔上尝试了其他一些东西,这些东西有无限的嵌套,但CDN或某些东西似乎破坏了我的布局,但我终于找到了 一个有效,现在我的布局看起来像this(base level) (expanded),但是表格坏了。 我当前的代码是一团糟,所以id喜欢知道是否有一种干净的方法来执行此操作,当前的完整代码为: https://pastebin.com/PBTDhxyY

手风琴代码(基本级别):

<div class="row product-listing">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="panel panel-default">
        <div class="panel-body nested-accordion">
            <div class="row mt-10">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="panel-group" id="level1-accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#level1-accordion" href="#plast-pro-1" class="collapsed">
                                    <table class="table">
                                        <tr>
                                            <td>LEVEL 1</td>
                                            <?php 
                                                for ($k = 0 ; $k < 11; $k++){ 
                                                    echo '<td>&nbsp;</td>'; 
                                                }
                                                ?>
                                            <td>0.00</td>
                                            <td>0.00</td>
                                            <td>0.00</td>
                                            <td>0.00</td>
                                            <td>0.00</td>
                                            <td>0.00</td>
                                        </tr>
                                    </table>
                                </a>
                            </div>
                            <div id="plast-pro-1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <ul class="list-unstyled">
                                        <li>
                                            <div class="panel-group" id="level2-accordion" role="tablist" aria-multiselectable="true">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading" role="tab" id="headingOne">
                                                        <h4 class="panel-title">
                                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#level2-accordion" href="#plast-pro-2" aria-expanded="true" aria-controls="plast-pro-2">
                                                                <table class="table">
                                                                    <tr>
                                                                        <td>LEVEL 2</td>
                                                                        <?php 
                                                                            for ($k = 0 ; $k < 11; $k++){ 
                                                                                echo '<td>&nbsp;</td>'; 
                                                                            }
                                                                            ?>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="panel-group" id="level2test" role="tablist" aria-multiselectable="true">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading" role="tab" id="headingOne">
                                                        <h4 class="panel-title">
                                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#level2test" href="#level2testlink" aria-expanded="true" aria-controls="plast-pro-2">
                                                                <table class="table">
                                                                    <tr>
                                                                        <td>LEVEL 2</td>
                                                                        <?php 
                                                                            for ($k = 0 ; $k < 11; $k++){ 
                                                                                echo '<td>&nbsp;</td>'; 
                                                                            }
                                                                            ?>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------------- -->
                                        <li>
                                            <div class="panel-group" id="level2testb" role="tablist" aria-multiselectable="true">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading" role="tab" id="headingOne">
                                                        <h4 class="panel-title">
                                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#level2testb" href="#level2testlinkb" aria-expanded="true" aria-controls="plast-pro-2">
                                                                <table class="table">
                                                                    <tr>
                                                                        <td>LEVEL 2</td>
                                                                        <?php 
                                                                            for ($k = 0 ; $k < 11; $k++){ 
                                                                                echo '<td>&nbsp;</td>'; 
                                                                            }
                                                                            ?>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                        <td>0.00</td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

0 个答案:

没有答案