During the recent updates made to these websites, I made some changes to the menu behavior so that it collapses on mobile devices when a menu item is clicked. For the most part, it works smoothly, but there is one issue. When I click on a mobile menu with sub-items for the first time, it expands briefly and then collapses. Subsequent attempts work fine. I have provided a video for better understanding.
Below is the javascript code that I included:
$( document ).ready( function () {
$('.navbar-nav>li').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
} );