Modifying Mobile Menu Toggle State

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).

  1. 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