Javascript 树无法正常工作

Question

我已经安装了 jstree 的 grails 插件。我似乎无法让它正常工作。

这似乎不是资源问题，如下所示。我不知道它不起作用。

这是我的 html

<div id="jstree">
    <ul>
        <li>Folder 1
            <ul>
                <li id="child_1">Child 1</li>
                <li>Child 2</li>
                <li id="child_2">Child 1</li>
                <li>Child 2</li>
                <li id="child_3">Child 1</li>
                <li>Child 2</li>
                <li id="child_4">Child 1</li>
                <li>Child 2</li>
            </ul>
        </li>
        <li>Folder 2</li>
        <ul>
            <li id="child_5">Child 1</li>
            <li>Child 2</li>
            <li id="child_6">Child 1</li>
            <li>Child 2</li>
            <li id="child_7">Child 1</li>
            <li>Child 2</li>
            <li id="child_8">Child 1</li>
        </ul>
    </ul>
</div>

那么我的javascript是

$(function () {
    $('#jstree').jstree();
});

我收到了^^它允许我单击它来展开第一个文件夹子节点，但不能展开第二个文件夹子节点。然后我尝试了这个javascript

$(function () {
    $("#jstree").jstree({ "plugins" : [ "themes", "default" ] });
});

我收到了^^单击它不会执行任何操作

然后我把这个绑起来

$(function () {
    $('#jstree').jstree();
});


$("#jstree").jstree({
    "themes": {
        "theme": "default",
        "dots": true,
        "icons": true,
        "url": "/css/jstree/themes/default/style.css"
    },
    "plugins" : [ "themes", "ui" ]
});

我收到了^^

这是否是一个兼容性问题，我认为不是的原因是因为它在其他网站(如 jstree.com)上适用于我

Answer 1

看来你的html结构不正确，你已经包含了第二个<ul>里面<li>

$('#jstree').jstree();

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

<div id="jstree">
    <ul>
        <li>Folder 1
            <ul>
                <li id="child_1">Child 1</li>
                <li>Child 2</li>
                <li id="child_2">Child 1</li>
                <li>Child 2</li>
                <li id="child_3">Child 1</li>
                <li>Child 2</li>
                <li id="child_4">Child 1</li>
                <li>Child 2</li>
            </ul>
        </li>
        <li>Folder 2
          <ul>
              <li id="child_5">Child 1</li>
              <li>Child 2</li>
              <li id="child_6">Child 1</li>
              <li>Child 2</li>
              <li id="child_7">Child 1</li>
              <li>Child 2</li>
              <li id="child_8">Child 1</li>
          </ul>
        </li>
    </ul>
</div>