javascript - 我可以在 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>