Develop Reference

Nested dropdrown menu

I'm trying to build a nested dropdown menu with javascript and click event. My html is this:
<ul>
<li id="menu-item-439" class="dropdown">
hostelería
<ul class="sub-menu">
<li id="menu-item-459">
Comanderos
</li>
<li id="menu-item-457" class="dropdown">
Venta online
<ul class="sub-menu">
<li>
PortalRest Pedidos
</li>
</ul>
</li>
</ul>
</li>
</ul>
and my javascript:
document.querySelectorAll('.dropdown').forEach(i => {
i.addEventListener('click', (e) => {
i.classList.toggle('show');
})
});
The problem is in the nested "dropdown" class. When i click in "child dropdown" (id="menu-item-457") toogle not only affects that element but also affects the parent (id="menu-item-439")
Thanks!!

Here
HTML
<ul>
<li id="menu-item-439" class="dropdown">
hostelería
<ul class="sub-menu">
<li id="menu-item-459">
Comanderos
</li>
<li id="menu-item-457" class="dropdown">
Venta online
<ul class="sub-menu">
<li>
PortalRest Pedidos
</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
let n=0, n2=0;
function toggle() {
n++;
if (n%2==0) {
document.getElementsByClassName("sub-menu")[0].style.display="none";
}
else {
document.getElementsByClassName("sub-menu")[0].style.display="block";
}
}
function toggle2() {
n2++;
if (n2%2==0) {
document.getElementsByClassName("sub-menu")[1].style.display="none";
}
else {
document.getElementsByClassName("sub-menu")[1].style.display="block";
}
}
CSS
.sub-menu {display: none}
If you wanted same with JQuery toggle method, then js should be like this
JS
function toggle() {
document.getElementsByClassName("sub-menu")[0].toggle();
}
function toggle2() {
document.getElementsByClassName("sub-menu")[1].toggle();
}

Make parent menu link toggle submenu link

I have a menu which I have working fine but I need a small change and that is I need the parent menu to toggle the submenu, currently if you click the parent menu the submenu appears but I need it so when you click the parent menu again it closes the sub menu.
You can see the menu in action here.
and this is the javascript that is for the menu:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').hide();
}
});
This is the menu html
<nav class="main">
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>

Replace this code:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
With the code below:
$('.dropdown-toggle').click(function() {
var $currentDropdown = $(this).next('.dropdown');
$currentDropdown.siblings('.dropdown').not($currentDropdown).removeClass('toggled');
$currentDropdown.siblings('.dropdown').not($currentDropdown).hide();
$currentDropdown.toggleClass('toggled');
$currentDropdown.toggle();
});
That should do it.

I think this is the simplier way :)
Hope you helped
$(".dropdown").css('display', 'none');
$('.dropdown-toggle').click(function(e) {
if ($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(".dropdown").hide();
$(this).next().show();
}
});
a {
display: block;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><nav class="main">
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>

I think this code will be enough.
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle();
});
Codepen Example

This can be done easily with Bootstrap:
<li class="submenu">
<i class="la la-user"></i>
<span> Main menue </span>
<span class="menu-arrow"></span>
<ul style="display: none;">
<li>sub menu 1</li>
<li> sub menu 2 </li>
<li> sub menu 3 </li>
</ul>
</li>

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>

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

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();
});

When User Open One DropDown Close Other DropDowns

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>

Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle

I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );