Bootstrap3中如何实现悬停某按钮时隐藏其他按钮的子菜单

你的问题核心是没有统一处理所有父按钮的悬停切换逻辑，且手动修改opacity的方式没有和Bootstrap的tab组件能力结合，导致不同tab的显隐状态没有联动。按以下步骤修改即可：

1. 替换原有JS代码 #

把你现有的JS逻辑全部替换为以下代码：

$(document).ready(function() {
    // 保留原有模态框内部的tab切换逻辑
    $('#create_btn').on('click', function(){
        $('#create_tab').tab('show')
    })
    $('#login_btn').on('click', function(){
        $('#login_tab').tab('show')
    })
    $('#create_btn').on('click', function(){
        $('#create1_tab').tab('show')
    })

    // 统一绑定所有顶部父按钮的悬停事件
    $('.container .nav li a[data-toggle="tab"]').on('mouseenter', function(e) {
        e.preventDefault();
        // 调用Bootstrap原生tab展示方法，会自动隐藏同组其他所有tab-pane
        $(this).tab('show');
    })

    // 可选拓展：如果需要鼠标离开整个按钮区域后隐藏所有子按钮，可开启以下逻辑
    /*
    $('.container, .tab-content').on('mouseleave', function() {
        $('.tab-content .tab-pane').removeClass('active in');
    })
    */
});

2. 可选优化 #

你原有代码中存在两处不影响功能但建议修改的问题：

• 删除重复的id="customTab"，id在单页面中必须唯一，只保留父按钮所在容器的id即可
• 可以删除原来手动修改opacity的相关代码，Bootstrap的tab组件自带的active、in类已经可以控制显隐，无需额外做样式覆盖

实现原理 #

Bootstrap的tab组件原生支持切换时自动隐藏其他同组的tab-pane，只需要在悬停父按钮时主动触发tab('show')方法，就可以实现你要求的「仅显示当前悬停按钮对应子按钮组，隐藏其他所有子按钮」的效果，不需要自己手动控制每个元素的显隐状态。

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