如何使用jQuery實現樹形菜單

我想爲此示例實現樹形菜單。首先必須關閉。當我們點擊設施Bulidngs必須出現intree格式，然後如果我們單擊XYZ樓層必須apper。像那樣....如何使用jQuery實現樹形菜單

我已經試過這段代碼，但不工作任何人都可以幫我。

$('.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>

來源

2016-10-03 Mr world wide

嘗試'jqxTree'從'jQWidgets' – Akshay

檢查出來：http://jsfiddle.net/2Smgv/2858/ –

使用引導CSS和這裏的演示引導給http://getbootstrap.com/javascript/#dropdowns –

隱藏所有子樹。
添加將在父項目單擊上切換子樹的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>

來源

2016-10-03 09:09:10

它的工作，但沒有即將到來的樹格式 –

首先，隱藏所有.subtree然後點擊li顯示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>

來源

2016-10-03 09:02:00 Mohammad

我們怎樣才能崩潰..？如果點擊設施都必須摺疊@mohammad –

可以使用JSTree庫這一點。其文檔可用here。它是一個完全自定義且易於使用的庫。

來源

2016-10-03 09:04:10

實測值的例子：

$('#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

來源

2016-10-03 09:04:23 AshBringer

如何使用jQuery實現樹形菜單

回答

相關問題