jQuery Forum

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