Modifying Mobile Menu Toggle State
I'm using the script below on a mobile menu. I would like to modify it so that when any menu link is clicked, the dropdown menu list is hidden (menu is closed). I believe that would be done by removing the class "expand" from the DIV with class "responsive-menu" placed on it. This would need to be consistent with toggling the menu off by clicking the menu hamburger icon (that's the default behavior).
- jQuery(function($) {
$('.menu-btn').click(function() {
$('.responsive-menu').toggleClass('expand')
})
})
jQuery(document).ready(function($) {
$(".menu-item-has-children").append("<div class='open-menu-link open'>+</div>");
$('.menu-item-has-children').append("<div class='open-menu-link close'>-</div>");
$('.open').addClass('visible');
$('.open-menu-link').click(function(e) {
var childMenu = e.currentTarget.parentNode.children[1];
if ($(childMenu).hasClass('visible')) {
$(childMenu).removeClass("visible");
$(e.currentTarget.parentNode.children[3]).removeClass("visible");
$(e.currentTarget.parentNode.children[2]).addClass("visible");
} else {
$(childMenu).addClass("visible");
$(e.currentTarget.parentNode.children[2]).removeClass("visible");
$(e.currentTarget.parentNode.children[3]).addClass("visible");
}
});
});
And here's how the actual page looks:
http://www.burntscarlet.com/_test/jquery/before_click.png
http://www.burntscarlet.com/_test/jquery/after_click.png