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">
    	<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 1

隐藏所有子树。
添加将在父项单击上切换子树的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

首先，隐藏所有.subtree然后点击li显示ul孩子。

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何使用jquery实现树状菜单

4 个答案: