如何将JSTree添加到网页标题中

Question

我想添加以下代码：

<div id="jstree">
        <ul>
            <li>Core 1
                <ul>
                    <li id="child_node_1">Trigonometry</li>
                    <li>Child node 2</li>
                </ul>
            </li>
            <li>Core 2</li>
        </ul>
    </div>
    <button>demo button</button>

    <script src="oi/dist/libs/jquery.js"></script>
    <script src="oi/dist/jstree.min.js"></script>
     <script>
    $(function () {
        $('#jstree').jstree();
        $('#jstree').on("changed.jstree", function (e, data) {
            console.log(data.selected);
        });
        $('button').on('click', function () {
            $('#jstree').jstree(true).select_node('child_node_1');
            $('#jstree').jstree('select_node', 'child_node_1');
            $.jstree.reference('#jstree').select_node('child_node_1');
        });
    });
    </script>

作为JSTree放入网页标题中，如此处所示。

我的头

但是，我只是以文本形式获得它，如图所示。 如何使它在HTML标题中显示为适当的文件夹结构？

HTML代码：

<header id="header"><p>Header...</p></header>

<div id="container">

    <main id="center" class="column">
        <article>

            <h1>Heading</h1>
            <div id="jstree">
                <ul>
                    <li>Core 1
                        <ul>
                            <li id="child_node_1">Trigonometry</li>
                            <li>Child node 2</li>
                        </ul>
                    </li>
                    <li>Core 2</li>
                </ul>
            </div>
            <button>demo button</button>

            <script src="oi/dist/libs/jquery.js"></script>
            <script src="oi/dist/jstree.min.js"></script>
             <script>
            $(function () {
                $('#jstree').jstree();
                $('#jstree').on("changed.jstree", function (e, data) {
                    console.log(data.selected);
                });
                $('button').on('click', function () {
                    $('#jstree').jstree(true).select_node('child_node_1');
                    $('#jstree').jstree('select_node', 'child_node_1');
                    $.jstree.reference('#jstree').select_node('child_node_1');
                });
            });
            </script>


        </article>                              
    </main>

    <nav id="left" class="column">
        <h3>Left heading</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
        <h3>Left heading</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>

    </nav>

    <div id="right" class="column">
        <h3>Right heading</h3>

    </div>

</div>

<div id="footer-wrapper">
    <footer id="footer"><p>Footer...</p></footer>
</div>

Answer 1

您忘记了包含jsTree CSS文件。 您可以使用lib随附的文件，也可以使用CDN的文件，如下所示。 另请检查演示- 小提琴演示

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">

<script src="oi/dist/libs/jquery.js"></script>
<script src="oi/dist/jstree.min.js"></script>
...