How to make a dynamic accordion menu with jQuery

Question

Lets say I have the following menu structure. I have 3 problems with it.

 $('.parent ul').hide(); var current_parent; $(document).delegate('.parent', 'click', (function() { var $this = $(this); if(current_parent !== undefined) { current_parent.find('ul').slideUp(); } current_parent = $this; // Check if the element is visble or not if(!$this.find('ul').is(':visible')) { $this.find('ul').slideDown(); } else { $this.find('ul').slideUp(); } })); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="parent">menu item1 <ul> <li class="child">Sub menu item1</li> <li class="child parent">Sub menu item2 <ul> <li class="child">Sub-sub menu item1</li> </ul> </li> </ul> </li> <li class="parent">menu item2 <ul> <li class="child">Sub menu item3</li> </ul> </li> </ul> 

1. When you click on menu item 1 the Sub-sub menu item1 is also opened. How can this be prefented?;
2. When you click on Sub menu item2 the menu item1 is also closed. How can this be prefented?.
3. How can I make this more dynamic so that when I add deeper menu items the menu still works but without having to add things like: $('ul ul ul').slideDown(); etc.?

Could anyone help me with these problems?

Thanks in advance

Answer 1

You can create a drop drop down menu with jquery

I have given individual HTML, CSS and JQuery code, use it and try to understand it.

There is an outer <div id="navigation"> and inside it their is an now in it every

is main menu item and in every

is sub menu item. Furthermore you can create sub menu in sub menu also by creating is sub menu item. Furthermore you can create sub menu in sub menu also by creating in

`.

 $(document).ready(function () { $("li").click(function () { var x = $(this).children("a:first").attr("href"); if (x != undefined) window.location.href = x; }); $("#nav li").hover(function () { $(this).find("ul:first").css({ visibility: "visible", display: "none", }).slideDown(400); }, function () { $(this).find("ul:first").css({ visibility: "hidden" }); }); }); 

 body { font-family: Calibri, Verdana; font-size: 16px; color: white; } a { color: inherit; text-decoration: none; } #navigation { height: 40px; } #nav { list-style: none; margin: 0px; padding: 0px; } #nav ul { list-style: none; margin: 10px 0px 0px -5px; padding: 0px; display: none; } #nav li { float: left; width: 150px; height: 30px; padding: 10px 0px 0px 5px; border: 0px solid transparent; border-right-width: 1px; border-right-color: gray; background-color: #6397CB; } #nav li ul li { width: 145px; height: 22px; padding: 10px 0px 8px 10px; border: 0px solid transparent; border-top-width: 1px; border-top-color: gray; } #nav li ul li ul { position: relative; top: -40px; margin-left: 145px; color: white; } #nav li ul li ul li { border: 0px solid transparent; border-left-width: 1px; border-left-color: gray; border-top-width: 1px; border-top-color: gray; } #nav li:hover { background-color: lightgray; cursor: pointer; } #nav li ul li:hover { color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navigation"> <ul id="nav"> <li><a href="#">My Name</a></li> <li>About U <ul> <li>How U? <ul> <li><a href="#">Your Extras</a></li> </ul> </li> <li><a href="#">Howz U?</a></li> </ul> </li> <li><a href="#">More</a></li> </ul> </div>