Как добавить 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 в веб-страницу заголовок, показанном здесь.

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

<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> 
...