javascript - Toggle Slide Navigation Not Working -

hi i'm having issue code...

$(document).ready(function () { var $active,     togglerselector = '.ghdr .gmain .gholder nav#gnav-primary-nav .nav-primary li a',     toggledselector = '.ghdr .gmain .gholder nav#gnav-primary-nav .nav-primary li ul',     $items = $(togglerselector),     animationduration = 300,     activeclassname = 'gactive',     activestyle = {height: auto},     notactivestyle = {height: 0},     hideactive = function() {         $active && $active             .stop()             .animate(notactivestyle, function() {                 $(this).removeclass(activeclassname).hide();             });             $active = void 0;             },     showactive = function($element) {         $element && ($active = $element)             .stop()             .show()             .animate(activestyle)             .addclass(activeclassname)     };  $items.on('click', function(event) {     var $this = $(this),         $overlay = $this.children(toggledselector),         thesame = $overlay.is($active);     hideactive();     thesame || showactive($overlay); }); $(this).on('click', function(event) {     var $target = $(event.target),         isoutclick = !$target.closest(togglerselector).length;     isoutclick && hideactive();  }); }); 

i need navigation detect height , cant around web me, seems proving quite difficult.

the code navigation of site, when clicks on dropdown link slides down , if click on page off nav slides up. allows them switch nav. sorry if answer isnt clear. have nav elements set display:none;

i think of work:

$(document).ready(function () {         $(".toggle").on('click', function(e){         e.preventdefault();          //deactivate         $(".toggle.active").next().toggle();         $(".toggle.active").toggleclass("active");                  $(this).toggleclass("active");         $(this).next().toggle();     });         $(".submenu").on("mouseout", function (e) {         $(this).toggle();         $(this).prev().toggleclass("active");     });    }); 

i added class named "toogle" anchors want have behaviour, this:

<a href="javascript:void(0);" class="toggle">shop</a> 

edit: added submenu class <ul> make work mouseout event

<ul class="submenu"> 

http://jsfiddle.net/a2e7urrg/4/

i didn't add animation, pretty easy it, can add animation css class active.