Search code examples
jquerymenusidebar

jQuery sidebar accordion menu not working


My sidebar menu is not expanding on click. When you click menu item, submenu should drop down.

Here's link: http://jsfiddle.net/hv6jt8rn/

$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('hover', function(){
   $(this).removeAttr('href');
   var element = $(this).parent('li');
   if (element.hasClass('open')) {
      element.removeClass('open');
      element.find('li').removeClass('open');
      element.find('ul').slideUp(200);
   }
   else {
      element.addClass('open');
      element.children('ul').slideDown(200);
      element.siblings('li').children('ul').slideUp(200);
      element.siblings('li').removeClass('open');
      element.siblings('li').find('li').removeClass('open');
      element.siblings('li').find('ul').slideUp(200);
   }
});

jQuery is included but still it isn't working. Am I missing something?


Solution

  • According to jQuery Documentation:

    Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

    You can solve this by changing:

    $('#cssmenu li.has-sub>a').on('hover', function(){
    //content
    });
    

    for

    $('#cssmenu li.has-sub>a').hover(function(){
    //content
    });
    

    Check working JsFiddle here