CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr world wide
Mr world wide

Reputation: 4814

How to implement tree menu with jquery

I want to implement tree menu for this example. First all has to be closed. When we click facility Bulidngs has to appear intree format and then if we click XYZ building Floors has to apper. like that....

i have tried this code but not working can anyone help me out.

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

Upvotes: 1

Views: 1559

Answers (4)

Max P.
Max P.

Reputation: 5679

  1. Hide all subtrees.
  2. Add js that will toggle subtrees on parent item click.

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

Upvotes: 3

AshBringer
AshBringer

Reputation: 2673

Found this example :

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

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

You can use JSTree library for this. Its documentation is available here. Its a fully customized and easy to easy to use library.

Upvotes: 1

Mohammad
Mohammad

Reputation: 21489

First, hide all .subtree then on click of li show ul child of it.

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

Upvotes: 2

Related Questions