jquery - Hidding one li items when clicked on another li item -

jquery - Hidding one li items when clicked on another li item -

i used jquery toggle function show hide drop-down menu, if 1 menu opened , seek open 1 previous 1 not hiding help me out.

$(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); $("ul.topnav li span").click(function() { $(this).parent().find("ul.subnav").toggle('medium'); }).hover(function() { $(this).addclass("subhover"); }, function(){ $(this).removeclass("subhover"); }); }); <ul class="topnav"> <li> <a href="#">geneology</a> <ul class="subnav"> <li><a href="#">plan</a></li> <li><a href="#">leg view</a></li> </ul> </li> <li> <a href="#">smart pin</a> <ul class="subnav"> <li><a href="#">my pin</a></li> <li><a href="#">send pins</a></li> <li><a href="#">pin history</a></li> <li><a href="#">request pin</a></li> </ul> </li> </ul>

i guess subnavs hiden css (if not please allow me know initial state of nav) seek this

$(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); $("ul.topnav li span").click(function() { var $this=$(this), $parent=$this.parent(), $shown=$('ul.topnav .shown').not($this.prev('.subnav')); //get visible subnav not 1 i'm clicking //check if there subnav visible , hide if($shown.size()) $shown.hide('medium').removeclass('shown'); $parent.find("ul.subnav").toggle('medium').toggleclass('shown'); }).hover(function() { //i guess doing hovering effect here $(this).addclass("subhover"); }, function(){ $(this).removeclass("subhover"); }); });

jquery