Bounce jquery submenu

Question

I make a menu in which each item has its own submenu. this is the markup:

<ul id="menu"> <li> <a href="javascript:void(0)" onclick="show_submenu(this)">TITLE 1</a> <ul class="submenu"> <li> <a href="javascript:void(0)">sub1</a> </li> <li> <a href="javascript:void(0)">sub2</a> </li> </ul> </li> <li> <a href="javascript:void(0)">TITLE 2</a> <ul class="submenu"> <li> <a href="javascript:void(0)">sub1</a> </li> <li> <a href="javascript:void(0)">sub2</a> </li> </ul> </li> <li> <a href="javascript:void(0)">TITLE 3</a> </li> <li> <a href="javascript:void(0)">TITLE 4</a> </li> </ul> 

CSS

 .submenu{display:none} 

script

 function show_submenu(that) { $('ul.submenu').slideUp(); $(that).next('ul.submenu:first').slideDown(); } 

The problem is that if I click on an item, it collapses its submenu , but if I click on it again , it will open the slide show again and again, this is a submenu , which is already open ... a kind of strange effect for the user. .. any ideas how to fix it?

Answer 1

You need to check if an existing submenu is visible. If so, you do not want to slide it again.

 var $submenu = $(that).next('ul.submenu:first'), viz = $submenu.is(":visible"); $('ul.submenu').slideUp(); if (!viz) { $(that).next('ul.submenu:first').slideDown(); } 

http://jsfiddle.net/ExplosionPIlls/zep6H/

Answer 2

use toggle in jquery

 $('#foo').toggle(showOrHide); 

http://api.jquery.com/toggle/

Answer 3

It does exactly what you encoded it. Use .slideToggle() ; instead

 function show_submenu(that){ $(that).next('ul.submenu:first').slideToggle(); } 

JsFiddle example

Answer 4

this should help

 function show_submenu(that){ if(!$(that).next('ul.submenu:first').is(":visible")){ $('ul.submenu').slideUp(); $(that).next('ul.submenu:first').slideDown(); } }