如何使用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实现树形菜单

回答

相关问题