I'm dealing with a menu that has sub-child menus, and the issue I'm encountering is that whenever I choose a child menu after the page loads, the menu collapses. My goal is to have the parent menu open and expanded instead.
This is the HTML Code:
<div id='cssmenu'>
<ul>
<li><a href='http://internallink.com/home'><span>Home</span></a></li>
<li class='active has-sub'><a href='http://internallink.com/products'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='http://internallink.com/product1'><span>Product 1</span></a>
<ul>
<li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
<li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://internallink.com/product2'><span>Product 2</span></a>
<ul>
<li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
<li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://internallink.com/about'><span>About</span></a></li>
<li class='last'><a href='http://internallink.com/contact'><span>Contact</span></a></li>
</ul>
</div>
Here's the JS code:
jQuery(document).ready(function () {
jQuery('#cssmenu').on("click","li.has-sub .holder",function () {
var element = jQuery(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
jQuery('#cssmenu ul li.has-sub').prepend('<span class="holder"></span>');
});
Is there a way to automatically expand the parent menu when selecting a child menu?
Fiddle Link: https://jsfiddle.net/x415mjfq/