Bootstrap导航栏下拉菜单点击触发异常：菜单始终展开问题求助

原代码通过hover事件实现下拉菜单的显示/隐藏，逻辑是移入显示、移出隐藏：

$(".nav-item").hover(function () {
    var menu_id = $(this).attr('data-category-id');
    $("#menu_content_" + menu_id).show();
}, function () {
    var menu_id = $(this).attr('data-category-id');
    $("#menu_content_" + menu_id).hide();
});

改成click事件后出现下拉菜单只展开不收起的问题，核心原因是：

• hover事件包含两个回调函数（触发/离开），分别对应显示和隐藏逻辑；
• 你只写了click的单个回调，但仅实现了显示逻辑，没有处理状态切换——点击时需要判断当前菜单是显示还是隐藏，再执行对应的操作。

解决方法 #

方法1：直接使用toggle()切换状态

toggle()方法会自动判断元素当前可见性，切换显示/隐藏状态，代码最简洁：

$(".nav-item").click(function () { 
    var menu_id = $(this).attr('data-category-id');
    $("#menu_content_" + menu_id).toggle();
});

方法2：手动判断可见性控制显示/隐藏

如果需要在切换时添加额外逻辑（比如动画、状态标记），可以手动判断元素状态：

$(".nav-item").click(function () { 
    var menu_id = $(this).attr('data-category-id');
    var $menu = $("#menu_content_" + menu_id);
    if ($menu.is(":visible")) {
        $menu.hide();
        // 可添加隐藏时的额外逻辑，比如移除激活类
        $(this).removeClass("active");
    } else {
        $menu.show();
        // 可添加显示时的额外逻辑，比如添加激活类
        $(this).addClass("active");
    }
});

方法3：处理多菜单互斥（可选）

如果页面有多个下拉菜单，建议点击一个菜单时收起其他已展开的菜单，避免界面混乱：

$(".nav-item").click(function () { 
    var menu_id = $(this).attr('data-category-id');
    var $targetMenu = $("#menu_content_" + menu_id);
    
    // 隐藏所有非当前目标的下拉菜单
    $(".menu-content").not($targetMenu).hide();
    // 移除其他导航项的激活状态
    $(".nav-item").not(this).removeClass("active");
    
    // 切换当前菜单的显示状态
    $targetMenu.toggle();
    // 切换当前导航项的激活状态
    $(this).toggleClass("active");
});

注：这里假设所有下拉菜单都添加了menu-content类，方便批量选择。

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