Links in menu not clickable

Question

I have a menu created in WordPress with dropdown elements. The problem that I have with my menu is that the all the links in it are not clickable and the page doesn't reload. However the links work whenever the JS code is removed, but then I don't have the toggle effect.

Here's an example:

 $('li > a').on('click', function(event) { event.preventDefault() $(this).parent().find('ul').first().toggle(300); $(this).parent().siblings().find('ul').hide(200); //Hide menu when clicked outside $(this).parent().find('ul').mouseleave(function() { var thisUI = $(this); $('html').click(function() { thisUI.hide(); $('html').unbind('click'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu=menu" class="menu"> <li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37"> <a href="domain.local">Home</a> </li> <li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38"> <a href="#">Dropdown</a> <ul class="sub-menu"> <li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40"> <a href="domain.local/submenu-1">Submenu 1</a></li> <li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40"> <a href="domain.local/submenu-2">Submenu 2</a></li> </ul> </li> </ul> 

What am I doing wrong?

Answer 1

The reason why the links are not clickable, is because in your javascript code you prevented the default behavior by adding: event.preventDefault() . That is also the reason why when you remove the javaScript code, the links suddenly work.

Please read the documentation on event.preventDefault() , or from jQuerys documentation .

Let me know if this helps, or if you have anymore questions.