Django / Foundation - 与表行的Accordion

时间:2017-04-04 10:05:42

标签: javascript html css django zurb-foundation

我是Web开发的新手,想要创建用户可以点击一行的表格以显示更多细节(其他行)。我不知道注意它是否很重要但是,我桌子的每一排都很沉重,它们包含:

我按照documentation来做我想做的事,但确实有效。根据这个帮助,它是写的

  

手风琴的容器需要类.accordion和属性数据手风琴。请注意,在这些示例中,我们使用a,但您可以使用任何所需的元素。

所以这是我的代码:

<table class="accordion" data-accordion data-accordion>
        <thead>
        <tr>
            <th>XXXX</th>
            <th class="sorttable_numeric">Score</th>
        </tr>
        </thead>
        <tbody>
        {% for X,couples in zipped %}

        <tr data-accordion-item data-multi-expand="true">
            <td>
                <a href="http://www.XXX={{XXX}}">{{XXX}}</a>

            </td>
            <td>
                <body>
                <ul class="vertical menu" data-accordion-menu>
                    <li>
                        <a href="#">{{0.295}}</a>
                        <ul class="menu vertical nested">
                            <li>
                                <table>
                                    <tbody>
                                    <tr>
                                        {% for couple in couples %}
                                        <td>{{VINIO}}</td>
                                        <td>{{PINIO}}</td>
                                        <td>{{0.222}}</td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                    </thead>
                                </table>
                            </li>
                            </li>
                        </ul>
                </body>
                </body>
            </td>
            <td>
                <div class="switch tiny">
                    <input class="switch-input" id={{ZZZZ}}_{{forloop.counter}} type="radio"
                           name="exampleSwitch">
                    <label class="switch-paddle" for={{ZZZZ}}_{{forloop.counter}}>
                        <span class="show-for-sr">Tiny Sandwiches Enabled</span>
                    </label>
                </div>
            </td>
        </tr>
        <div class="accordion-content" data-tab-content>
            Here should be the content that appears when the user click on the table row. I want this content to be others rows, is possible ?
        </div>
        </li>
        {% endfor %}
        </tbody>
    </table>

我不明白为什么我没有一个表,用户可以点击并展开它以查看该行包含的内容。

感谢您的帮助。

0 个答案:

没有答案