Bootstrap 4.1移动端菜单点击子项首次展开后随即折叠问题求助

我调整网站移动端菜单时，设置了点击菜单项自动折叠菜单的功能，大部分情况正常，但首次点击带子项的菜单项时，菜单会先展开立刻折叠，后续点击就正常了。

原JavaScript代码如下：

$( document ).ready( function () {

    $('.navbar-nav>li').on('click', function(){
        $('.navbar-collapse').collapse('hide');
    });

} );

问题原因 #

带子项的菜单项本身自带展开/折叠子菜单的默认事件，你的点击事件和这个默认事件同时触发。首次点击时，默认事件先展开子菜单，紧接着你的代码又触发了整个导航栏的折叠操作，就出现了“先展开再折叠”的异常。后续点击时子菜单已经展开，默认事件是折叠子菜单，和你的折叠操作方向一致，所以表现正常。

解决方案 #

方案一：区分菜单项类型处理

只在点击没有子菜单的普通菜单项时折叠导航栏，点击带子项的父菜单项时仅处理子菜单的展开/折叠：

$(document).ready(function () {
    // 点击无子女菜单项时折叠导航
    $('.navbar-nav>li:not(:has(ul))').on('click', function(){
        $('.navbar-collapse').collapse('hide');
    });
    
    // 点击带子女菜单项时阻止事件冒泡，避免触发全局折叠
    $('.navbar-nav>li:has(ul)').on('click', function(e){
        e.stopPropagation();
    });
});

方案二：延迟执行折叠操作

通过设置短延迟，避开默认子菜单事件的执行时机：

$(document).ready(function () {
    $('.navbar-nav>li').on('click', function(){
        setTimeout(function(){
            $('.navbar-collapse').collapse('hide');
        }, 100);
    });
});

内容的提问来源于stack exchange，提问作者gully