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?
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