Event delegation to support pointing and clicking on the accordion menu

Question

I am building a vertical accordion navigation that requires sub-navigation links to be presented and remain open when you hover or click .accordionButton.

So far, I could get the .accordionContent child to expand when it hangs, however it does not remain open.

I saw this SO: click mouse mouseewave click page , which may be a good start, but cannot wrap my head around the implication.

Here is my fiddle and markup:

http://jsfiddle.net/faGMR/8/

HTML

<ul id="mainNav"> <li><a class="accordionButton" href="javascript:void(0);">head link 1</a> <ul class="accordionContent"> <li> <a href="javascript:void(0);">sub link 1</a> </li> <li> <a href="javascript:void(0);">sub link 2</a> </li> </ul> </li> <li><a class="accordionButton" href="javascript:void(0);">head link 2</a></li> <li><a class="accordionButton" href="javascript:void(0);">head link 3</a> <ul class="accordionContent"> <li> <a href="javascript:void(0);">sub link 1</a> </li> <li> <a href="javascript:void(0);">sub link 2</a> </li> </ul> </li> <li><a class="accordionButton" href="javascript:void(0);">head link 4</a></li> <li><a class="accordionButton" href="javascript:void(0);">head link 5</a></li> <li><a class="accordionButton" href="javascript:void(0);">head link 6</a></li> </ul> 

Js

 $(document).ready(function () { $('.accordionContent').hide(); $('.accordionButton').mouseenter(function () { $(this).next('.accordionContent').stop().slideToggle("normal"); }, function () { $(this).addClass("hover"); $(this).next('.accordionContent').stop().slideToggle('fast'); }).mouseleave(function () { $(this).next('.accordionContent').stop().slideToggle("normal"); }, function () { $(this).removeClass("hover"); $(this).next('.accordionContent').stop().slideToggle('fast'); }); 

});

Answer 1

Something like this violin ?

 $(function () { var $accContents = $('.accordionContent'), $accButtons = $('.accordionButton'); $accContents.hide(); $accButtons.on('mouseenter click', function() { var $thisContent = $(this).parent().find('.accordionContent'); if($thisContent.length) { $accContents.not($thisContent).slideUp('fast'); $thisContent.slideToggle('fast'); } }); }); 

Use .slideDown('fast') instead of slideToggle if switching is not required (which would make the click obsolete).