我可以在html页面中有多个级别的手风琴吗？

Question

我有一个问题，但我找不到合适的解决方案或可视化此解决方案。

我有深层嵌套对象，我必须在网站上显示每个孩子的详细信息页面。

结构就像这样

1. Organisation
2. -----------------> Centres
3. -------------------------------schools
4. -----------------------------------------Kids Branch
5. -----------------------------------------Senior Branch

在所有这些对象中有许多字段，如名称，描述等。

我需要在一个页面中显示所有内容。

如果

，设计会变得非常混乱

i have 3 centres , 
then each center has 3 schools and 
each school has 2 bracnches

目前我只是在表标签中显示所有内容，而对于孩子我只是添加一些缩进 就像这样

现在信息非常庞大，页面很长，客户想要手风琴或其他任何东西，以便每个对象都可以折叠或展开。

我不确定我们可以做3-4级手风琴吗

我有这个链接 http://www.adipalaz.com/experiments/jquery/nested_accordion.html

但不确定是否会这样做

Answer 1

试试这个

JsFiddle ： http://jsfiddle.net/ZGTJb/

<强> CSS

.head {
            background: #eee;
            cursor: pointer;
        }

        .section .head, .section .section {
            margin-left: 20px;
        }

        .section{
            display:none;   
        }

脚本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $('#accordion .head').click(function () {
                var head = $(this);

                // remove any active head
                head.siblings('.head').removeClass('active');

                var section = head.next('.section');
                //remove .section to exclude from hide all
                section.removeClass('section');

                //hide sibling sections
                head.siblings('.section').hide();

                // set .section class back
                section.addClass('section');

                if( !section.css(':visible')) {
                    // set as active and show section
                    head.addClass('active');
                    section.fadeIn(500);
                };

            });
        });
    </script>

<强> HTML

<div id="accordion">
        <h3 class="head">
            section 1</h3>
        <div class="section">
            <p>
                section 1
            </p>
            <h3 class="head">
                section 1.1</h3>
            <div class="section">
                <p>
                    section 1.1
                </p>
            </div>
            <h3 class="head">
                section 1.2</h3>
            <div class="section">
                <p>
                    section 1.2
                </p>

                <h3 class="head">
                    section 1.2.1</h3>
                <div class="section">
                    <p>
                        section 1.2.1
                    </p>
                </div>

                <h3 class="head">
                    section 1.2.2</h3>
                <div class="section">
                    <p>
                        section 1.2.2
                    </p>
                </div>

            </div>
        </div>
        <h3 class="head">
            section 2</h3>
        <div class="section">
            <p>
                section 2
            </p>
        </div>
    </div>