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进入网页标题，如图所示。

My Heading

然而，我只是将它作为文本，如图所示。如何让它在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中的文件，如下所示。另请查看演示 - Fiddle Demo

$ cat TestTest.php
<?php
require_once 'vendor/autoload.php';
class TestTest extends PHPUnit_Framework_TestCase {
    function test() {
        throw new Exception("Outer exception message", 0, new Exception("Inner exception message"));
    }
}

$ ./vendor/bin/phpunit TestTest.php
PHPUnit 5.3.5 by Sebastian Bergmann and contributors.

E                                                                   1 / 1 (100%)

Time: 57 ms, Memory: 4.25MB

There was 1 error:

1) TestTest::test
Exception: Outer exception message

/tmp/TestTest.php:7

Caused by
Exception: Inner exception message

/tmp/TestTest.php:7

FAILURES!
Tests: 1, Assertions: 0, Errors: 1.

如何将JSTree添加到Web页面标题中

1 个答案: