jqueryでツリーメニューを実装する方法

Question

この例ではツリーメニューを実装します。最初はすべて閉じなければならない。 施設をクリックすると、Bulidngsがintree形式で表示され、次にXYZ建物をクリックするとFloorsが追加されます。そのように....

私はこのコードを試しましたが、働いていない人は私を助けてくれます。

$('.treemenu').click(function() { 
 
     $(this).parent().children('ul.subtree'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<ul class="treemenu"> 
 
    <li>Facility 
 
    <ul class="subtree"> 
 
    <li>Building 
 
    <ul class="subtree"> 
 
    \t <li>Royal Building</li> 
 
    \t <li>Taj Building</li> 
 
    \t <li>XYZ Building 
 
    \t \t <ul class="subtree"> 
 
    \t \t \t <li>Floors 
 
    \t \t \t \t <ul class="subtree"> 
 
    \t \t \t \t \t <li>1st Floor</li> 
 
    \t \t \t \t \t <li>2nd Floor</li> 
 
    \t \t \t \t \t <li>3rd Floor</li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </li> 
 
    \t \t </ul> 
 
    \t </li> 
 
    </ul> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
    </ul>

Answer 1

1. は、すべてのサブツリーを非表示にします。
2. 親アイテムのクリックでサブツリーを切り替えるjsを追加します。

<style> 
 
    .subtree{ 
 
     display: none; 
 
    } 
 
    .treeitem{ 
 
     cursor: pointer; 
 
    } 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
     $('.treeitem').click(function() { 
 
      $(this).next('ul.subtree').toggle(); 
 
     }); 
 
    }); 
 
</script> 
 
<ul class="treemenu"> 
 
    <li><span class="treeitem">Facility</span> 
 
     <ul class="subtree"> 
 
      <li><span class="treeitem">Building</span> 
 
       <ul class="subtree"> 
 
        <li>Royal Building</li> 
 
        <li>Taj Building</li> 
 
        <li><span class="treeitem">XYZ Building</span> 
 
         <ul class="subtree"> 
 
          <li><span class="treeitem">Floors</span> 
 
           <ul class="subtree"> 
 
            <li>1st Floor</li> 
 
            <li>2nd Floor</li> 
 
            <li>3rd Floor</li> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 2

まず、liのクリック時に、すべての.subtreeを隠すには、それのul子を示しました。

$(".subtree").hide(); 
 
$('.treemenu li').click(function() { 
 
    $(this).children('ul.subtree').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="treemenu"> 
 
    <li>Facility 
 
    <ul class="subtree"> 
 
     <li>Building 
 
     <ul class="subtree"> 
 
      <li>Royal Building</li> 
 
      <li>Taj Building</li> 
 
      <li>XYZ Building 
 
      <ul class="subtree"> 
 
       <li>Floors 
 
       <ul class="subtree"> 
 
        <li>1st Floor</li> 
 
        <li>2nd Floor</li> 
 
        <li>3rd Floor</li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 3

あなたは、このためにJSTreeライブラリを使用することができます。そのドキュメントはhereです。その完全にカスタマイズされ、使いやすいライブラリに簡単です。この例が見つかり

Answer 4

：

$('#jqxTree').jqxTree({ 
    height: '300px', 
    width: '300px', 
    theme: 'energyblue' 
}); 
$('#Remove').jqxButton({ 
    height: '25px', 
    width: '100px', 
    theme: 'energyblue' 
}); 
$('#Remove').click(function() { 
    var selectedItem = $('#jqxTree').jqxTree('selectedItem'); 
    if (selectedItem != null) { 
    // removes the selected item. The last parameter determines whether to refresh the Tree or not. 
    // If you want to use the 'removeItem' method in a loop, set the last parameter to false and call the 'render' method after the loop. 
    $('#jqxTree').jqxTree('removeItem', selectedItem.element, false); 
    // update the tree. 
    $('#jqxTree').jqxTree('render'); 
} 
}); 
$('#jqxTree').on('removed', function (event) { 
    alert("You removed item"); 
}); 

DEMO