I'm having trouble sliding a submenu dropdown on my mobile site. The last element is not moving out of the way as expected, and it's expanding over the current selector. Here is the code snippet:
<li class="dropdown">
<a href="#">Solutions</a>
<ul class="dropdown-menu">
<li><a href="#">ERP</a></li>
<li><a href="#">Module</a></li>
<li><a href="#">WMS</a></li>
<li><a href="#">Sales Tax </a></li>
<li class="dropdown hasKids">
<a href="#" class="rd-with-ul">Websites <b class="caret-right"></b><span class="rd-submenu-toggle"></span></a>
<ul class="dropdown-menu websiteClasses">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contactUs.html" class="mobileFont">Contact</a></li>
$(".hasKids").on('click', function(){
$(this).find(">:first-child").toggleClass('active');
})
$(".hasKids").on('click', function(){
if ($('.hasKids').find(">:first-child").hasClass("active")){
console.log('active');
var submenu = $(".hasKids").find(">:nth-child(2)");
submenu.slideDown();
} else {
console.log('not active');
}
})
I need help with making the dropdown for "hasKids" slide down to display the two li elements A and B, while pushing the "Contact Us" link out of the way when clicked. It should slide back up when "hasKids" is clicked again. Thank you!