jQuery - Toggle megamenu submenu items by click

Question

I am currently trying to create a clickable menu item. The menu item has a dropdown mega menu. I want the dropdown menu to only display and hide when it is clicked, not when hovered over with the mouse.

The menu item is called "meny" and has a hamburger icon next to it :)

Here's the code I've made so far, but it's not working:

<script>
jQuery(document).ready(function(){
jQuery(".et_fullwidth_nav #top-menu li.mega-menu > ul").click(function(){
jQuery("this").toggle();
});
</script>

my page link is byes.hankens.net using wordpress 4.6.1

I am new to jQuery and would love some help.. Thank you

Answer 1

Try this ->

jQuery(document).ready(function($) { 
 $('#menu-main-menu a').click(function( event ){
 var visibleSubmenu = $('#menu-main-menu ul.sub-menu:visible');
 var submenu = $(this).next('ul.sub-menu');
 if( submenu.length >= 1 ) {
 event.preventDefault();
 visibleSubmenu.slideUp();
 submenu.slideToggle();
 }
 });
});