-4

..或者是其他东西。

我想让文件结构在 html 4 中完全可折叠。我已经使用 JQuery 和 Accordian 来按第一个字母对部分进行分组，但 Accordian 似乎不适合将多个级别向下分组。

在屏幕截图中，您可以看到我在 Discogs 摘要部分使用了 Accordian。我的问题是歌曲更改部分，我希望它表示为可折叠/可扩展的文件夹结构。

当前版本的 html 报告

4

1 回答 1

0

一旦 Id 将他们的示例缩减为更易于管理的东西，我就设法让一些东西与 jstree 一起工作。

在此处输入图像描述

<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<script type="text/javascript" class="source below">
$(function () {
    $("#songchanges")
        .jstree({
            "plugins" : ["themes","html_data","ui","crrm","hotkeys"],
            "core" : { "initially_open" : [ "phtml_1" ] }
        })
        .bind("loaded.jstree", function (event, data) {
        });
    $("#songchanges").bind("open_node.jstree", function (e, data) {
        data.inst.select_node("#phtml_2", true);
    });
});
</script>
</head>
<body>
<div id="songchanges">
    <ul>
        <li id="phtml_1">
            <a href="#">C:\Music</a>
            <ul>
                <li id="phtml_2">
                    <a href="#">B</a>
                    <ul>
                        <li id="phtml_3">
                            <a href="#">Blur</a>
                                <ul>
                                    <li id="phtml_4">
                                        <a href="FixSongsReport_2.html">Leisure</a>
                                    </li>
                                    <li id="phtml_5">
                                        <a href="FixSongsReport_1.html">ParkLife</a>
                                    </li>
                                </ul>
                        </li>
                    </ul>       
                </li>   
                <li id="phtml_6">
                    <a href="#">V</a>
                    <ul>
                        <li id="phtml_7">
                            <a href="#">Various Artists</a>
                                <ul>
                                    <li id="phtml_8">
                                        <a href="FixSongsReport_1.html">World War II Songs</a>
                                    </li>
                                    <li id="phtml_9">
                                        <a href="FixSongsReport_2.html">Moonlight Classics</a>
                                    </li>
                                </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
于 2013-09-04T08:56:28.113 回答