Search jQuery

jQuery Forum

Collapsible menu

in Using jQuery • 12 years ago

Hello everybody,

i'm new to jQuery and even after reading tutorials, examples and the references again and again i'm not able get this thing working. Buckwheats!!! Obviously i simply don't have the full understanding of JS / jQuery.

What i want to do:

- a collapsible menu made of <ul> and <li>
- the first and second level are always visible
- unrelated sublevels close if another sublevel is opened (e.g. clicking on Page 1 - 2 closes subpages of Page 1 - 1)
- only the 1st child is shown (lets say i have the 4th level open (Page 1 - 1 - 1 - n) and now click on the 2nd level (Page 1 - 1) - the 3rd level (Page 1 - 1 - 1) remains visible, but the 4th level closes)

Here's my approach. The submenus open, but they don't close. Could you please give me a hint?

http://www.wavr.de/collapsiblemenu/

Thank you!

Replies(6)

olliemcca..

menu problem

12 years ago

Hi. I've got a similar problem with my own expandable menu!

I'll try to help although it could be a case of the blind leading the blind.

Can I see the code, are you using toggle or show/hide?

sir_doom_..

Re: Collapsible menu

12 years ago

Here it comes!

: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>My little accordion</title> <script src="js/jquery.js" type="text/javascript"></script> <style type="text/css"> body { font-family: Arial; font-size: 12px; } a { color: #333333; text-decoration: none; } #mainmenu { width: 300px; } #mainmenu ul { list-style-type: none; } .firstlevel { font-weight: bold; border-bottom: 1px solid #333333; padding-top: 5px; padding-bottom: 15px; } .secondlevel { font-weight: normal; } .lowlevel { display: none; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { $("li").click(function(){ $(this).children("ul.lowlevel").show(); }); }); </script> <div id="mainmenu"> <ul class="firstlevel"> <li><a href="#">Page 1</a> <ul class="secondlevel"> <li><a href="#">Page 1 - 1</a> <ul class="lowlevel"> <li><a href="#">Page 1 - 1 - 1</a> <ul class="lowlevel"> <li><a href="#">Page 1 - 1 - 1 - 1</a></li> <li><a href="#">Page 1 - 1 - 1 - 2</a></li> <li><a href="#">Page 1 - 1 - 1 - 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Page 1 - 2</a> <ul class="lowlevel"> <li><a href="#">Page 1 - 2 - 1</a></li> </ul> </li> <li><a href="#">Page 1 - 3</a> <ul class="lowlevel"> <li><a href="#">Page 1 - 3 - 1</a></li> </ul> </li> </ul> </li> </ul> <ul class="firstlevel"> <li><a href="#">Page 2</a> <ul class="secondlevel"> <li><a href="#">Page 2 - 1</a> <ul class="lowlevel"> <li><a href="#">Page 2 - 1 - 1</a> <ul class="lowlevel"> <li><a href="#">Page 2 - 1 - 1 - 1</a></li> <li><a href="#">Page 2 - 1 - 1 - 2</a></li> <li><a href="#">Page 2 - 1 - 1 - 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Page 2 - 2</a> <ul class="lowlevel"> <li><a href="#">Page 2 - 2 - 1</a></li> </ul> </li> <li><a href="#">Page 2 - 3</a> <ul class="lowlevel"> <li><a href="#">Page 2 - 3 - 1</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>

olliemcca..

Re: Collapsible menu

12 years ago

try this

: <script type="text/javascript"> $(document).ready(function() { $("li").click(function(){ $(this).children("ul.lowlevel").toggle(); }); }); </script>

sir_doom_..

Re: Collapsible menu

12 years ago

sorry. doesn't work.

sir_doom_..

Re: Collapsible menu

12 years ago

Still got no solution. Please help!

tyde_2

Re: Collapsible menu

12 years ago

Why are you having <a href="#"> when you don't use the tag ??

This will get you on your way

: <script type="text/javascript"> $(document).ready(function() { $("li").click(function(){ $('ul.lowlevel').hide(); $(this).children('ul.lowlevel').show(); $(this).parents('ul.lowlevel').show(); return false; }); }); </script>

Top Reply

Response title

Attachments

jQuery Forum

Collapsible menu

Replies(6)

menu problem

Re: Collapsible menu

Re: Collapsible menu

Re: Collapsible menu

Re: Collapsible menu

Re: Collapsible menu

Statistics

Tags

Actions

Related Posts