How to implement tree menu with jquery

Question

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>

use Bootstrap css and here is the demo bootstrap gives getbootstrap.com/javascript/#dropdowns — aditya srivastava
– aditya srivastava, Commented Oct 3, 2016 at 9:06

Max P. · Accepted Answer · 2016-10-03 09:09:10Z

Hide all subtrees.
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>

Mohammad · Accepted Answer · 2016-10-03 09:02:00Z

2

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>

answered Oct 3, 2016 at 9:02

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

1 Comment

Mr world wide Over a year ago

How can we Collapse..? if click facility all has to collapse @mohammad

Mayank Pandeyz · Accepted Answer · 2016-10-03 09:04:10Z

1

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

answered Oct 3, 2016 at 9:04

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

AshBringer · Accepted Answer · 2016-10-03 09:04:23Z

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

Collectives™ on Stack Overflow

How to implement tree menu with jquery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related