How to implement tree menu with jquery - javascript

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>

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>

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>

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

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

Related

How to toggle nested lists using button

I've created a list with nesting and added a button to every parent <li> element. The list looks like this:
$("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat13' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat13' class='buttons-filter'>expnd3</button>");
$(document).ready(function() {
$("button").click(function() {
$('li > ul').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
<li>1</li>
<li class="parent" id="pr1">2
<ul class="children">
<li>2.1</li>
</ul>
</li>
<li>3</li>
<li class="parent" id="pr2">4
<ul class="children">
<li>4.1</li>
<li class="parent" id="pr3">4.2
<ul class="children">
<li>4.2.1</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
But this one toggles all list, instead of toggling only separate nested list?
How to show/hide only separate nested lists clicking the buttons?
Thanks in advance.
As for the main question - instead of each li > ul elements, you have to toggle only the ul element which is right before a button. So you should use .prev()
$("button").click(function() {
$(this).prev().toggle();
});
$("#pr1").append("<button id='bnt-cat131' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat132' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat133' class='buttons-filter'>expnd3</button>");
$(document).ready(function() {
$("button").click(function() {
$(this).prev().toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
<li>1</li>
<li class="parent" id="pr1">2
<ul class="children">
<li>2.1</li>
</ul>
</li>
<li>3</li>
<li class="parent" id="pr2">4
<ul class="children">
<li>4.1</li>
<li class="parent" id="pr3">4.2
<ul class="children">
<li>4.2.1</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
Your code has another issue that should be fixed - each button has the same id attribute (bnt-cat13).
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
Change your function into:
(document).ready(function() {
$("button").click(function() {
$(this).parent().children('ul').toggle();
});
});

Javascript - Bootstrap dropdown on hover open all menu levels of submenu

I already have javascript function that works well with dropdown list items which has just one dropdown-menu, but the problem occurs when I have dropdown list item with two or menu submenu levels, because on hover it opens all menu levels of submenu... Site is live, take a look - http://mile.x3.rs/mile/uram/
JavaScript that works fine with one dropdown-menu level
// MENU HOVER
$(document).ready(function() {
$(".dropdown, .dropdown-active").hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
<li class="dropdown">
Partneri <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Partner 1
</li>
<li>Partner 2
</li>
<li>Partner 3
</li>
<li>Partner 4
</li>
<li>Partner 5
</li>
<li>Partner 6
</li>
</ul>
</li>
But this
<li class="dropdown">
Reference <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
Prehrambena industrija
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
Pivare<i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li>Option 1
</li>
<li>Option 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
You just need to edit your jquery code to be like that .
$(document).ready(function() {
$(".dropdown, .dropdown-active").hover(function() {
$(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeOut(500);
});
});
so the script will only run on the first element only .
https://jsfiddle.net/IA7medd/63Lfgjnm/
You need to select only direct descendants of an element using jQuery's find().
Try this and notice $(this).find('> .dropdown-menu'):
$(document).ready(function() {
$(".dropdown, .dropdown-active").hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
Here is the full demo:
$(document).ready(function() {
$(".dropdown, .dropdown-active").hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet" />
<div class="container">
<header>
<li class="dropdown">
Reference <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
Prehrambena industrija
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
Pivare<i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li>Option 1
</li>
<li>Option 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</header>
</div>
You are using .find which traverses all descendants of the menu. You only need the "next level" per your comment so you should use .children as that will not traverse to the next level.
$(document).ready(function() {
$(".dropdown, .dropdown-active").hover(function() {
$(this).children('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).children('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
Reference: https://api.jquery.com/children/

How to toggle only header element not the list

I have this function that expands the <ul> and hides it after it is pressed.But when i press on <li> it will also close or expand. How do I make it to toggle only when the the <h4> is clicked ?
$('.category ul').hide();
$('.sub').click(function() {
$(this).find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
Thanks in advance.
Changes made
► changed $('.sub').click(function() { to $('.sub h4')
► changed $(this).find('ul') to $(this).next()
Working Demo
$('.category ul.archive_posts').hide();
$('.sub h4').click(function() {
$(this).next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>
Change the binding to the h4, then target the next ul.archive_posts for sliding.
$('.category ul').hide();
$('h4').click(function() {
$(this).next('ul.archive_posts').slideToggle();
});
See it working in this JS Fiddle: https://jsfiddle.net/rwvdf8ys/1/
Hope that helps.
The problem is $('this').find('ul').slideToggle();
'this' represents the obj that is cals the function. In this case it is h4. H4 has noe ul, so you cant find it. but you can find ul on $('.sub')
Here is ann example
$('.category ul').hide();
$('h4').click(function() {
$('.sub').find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4 id="foo"><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
js fiddle:
https://jsfiddle.net/8hvc4cfh/
You might use the siblings('ul') selector to find and close the neighbour ul. While $(".sub h4") limits the clickable elements to your h4.
$('.category ul').hide();
$('.sub h4').click(function() {
console.log('test');
$(this).siblings('ul').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>
You can try this.
$('li.sub h4').click(function() {
$(this).next().slideToggle();
});

How to get a previous DIV with jQuery

I want to animate an element (.item-i) after I click on another element(.item-1) which is following below. Now I don't know, how to get to this element.
I want only the exact above element animated, not both above, only the first element above.
I made an easy show up in http://jsfiddle.net/Eef4v/1/. The YellowBG is the "animation".
Here is my JS code:
$('.item-1').click(function() {
$(this).closest('.item-i').css( "background", "yellow" );
});
And my HTML Markup:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<ul id="Ul1" class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Use:
$(this).closest('.item-ii').prev().css( "background", "yellow" );
Working Demo
For Toggling background color:
$(this).closest('.item-ii').prev().toggleClass("highlight");
CSS:
.highlight {background: yellow;}
Demo with ToggleClass
Two ways to get .item-i to highlight.
$(this).parents('.level-1').find('.item-i').css( "background", "yellow" );
but if you have multiple .item-i classes under your .level-1 then they would all turn yellow.
Working Demo
You could also write a find algorithm that goes through each parent of .item-1 and finds the closest item-i
$('.item-1').click(function () {
$(this).parents().each(function(index,elem){
var query = $(elem).find('.item-i');
if(query.length > 0)
{
query.first().css("background-color", "yellow");
return false;
}
});
});
Working Algorithm demo

How to refactor this JQuery code so that it follows the DRY principle

See. I have the following html <ul>-<li> lists here.
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who we are?</li>
<li>What we stand for?</li>
</ul>
</li>
<li class="dropdown">
Campaigns<b class="caret"></b>
<ul class="dropdown-menu">
<li>Get Involved</li>
</ul>
</li>
<li>News</li>
<li>Donate</li>
</ul>
Then I have the following jquery code
$("#about-us").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#47F514");
});
$("#campaigns").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#F2720A");
});
$("#news").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#0A76F2");
});
$("#donate").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#F7A116");
});
I can see that line $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E") is repeated in many lines. So surely I can take this out and put a new function in each click events to make this same calls this many times.
What should I do to refactor this?
You can do it this way :
var colors_array_by_id = { "about-us" : "#47F514", "campaigns" : "#F2720A", "news" : "#0A76F2", "donate" : "#F7A116" };
$("#about-us, #campaigns, #news, #donate").click(function(){
$("ul.nav > li > a").css("background-color", "#0E0E0E");
$(this).css("background-color", colors_array_by_id[$(this).attr('id')]);
});
The only thing that changes is the color depending of the clicked element. So, I created here an associative array containing id-color couples.
Here's how I would do it -
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who we are?</li>
<li>What we stand for?</li>
</ul>
</li>
<li class="dropdown">
Campaigns<b class="caret"></b>
<ul class="dropdown-menu">
<li>Get Involved</li>
</ul>
</li>
<li><a href="#" id="news" class="navLinks" data-bgcolor="#0A76F2" >News</a></li>
<li><a href="#" id="donate" class="navLinks" data-bgcolor="#F7A116" >Donate</a></li>
</ul>
I've added a data attribute to the links called data-bgcolor which has the color value. Next I attach a single click handler to all the links.
$("#about-us, #campaigns, #news, #donate").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color", $(this).attr("data-bgcolor"));
});
You could do this,
In css,
.myClass{ background-color: #OEOEOE;}
on load,
var elm = $("ul.nav").children("li").children("a");
and then,
$("#about-us, #campaigns, #news, #donate").click(function(){
$this = $(this);
elm.addClass("myClass");
$this.css("background-color", $this.data("bgcolor"));
});
You can use the .data() instead of .attr().

Categories

Resources