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>