My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field of a specific link to null in the menu options, clicking on it reloads the home page.
What I would like is for when I click on any parent li, the default event generation should stop. I tried using preventDefault but it seems not to be working in my case as it still reloads the page after showing the list items of their parent.
Here's a fiddle: Fiddle
HTML:
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><a href="index.php?route=common/location_details&loc_id=24"><span class="menu-title">Burlington Mall, MA</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=25"><span class="menu-title">Burlington Mall, MA - Cart</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
... (more HTML code here)
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//I want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//Redirect
}
});
CSS:
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li {
padding: 10px;
position: relative;
margin: auto;
}