如何用jquery实现树状菜单

Question

我想为这个例子实现树菜单。首先，所有的一切都必须关闭。当我们点击设施，Bulidngs必须显示为intree格式，然后，如果我们点击XYZ建筑楼层必须附加。就像那样..。

我试过这段代码，但是没有人能帮我解决问题。

​

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

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

首先，隐藏所有的.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>

​

Answer 3

为此，您可以使用JSTree库。它的文档是可用的这里。它是一个完全定制和易于使用的库。