为何bootstrap-multiselect会关闭导航栏中的dropdown-menu？

我之前也碰到过一模一样的情况——Bootstrap的Dropdown组件默认会在点击菜单内部元素时触发关闭逻辑，而bootstrap-multiselect生成的交互元素（比如它的触发按钮和下拉选项面板）会把点击事件向上冒泡，直接触发父级导航Dropdown的关闭行为。结合你的CodeIgniter开发场景，给你几个实用的解决办法：

方法1：阻止Multiselect元素的事件冒泡 #

在初始化multiselect之后，给它生成的按钮和面板绑定事件，阻止点击事件向上传递到父Dropdown：

function select_establecimiento() {
    $.getJSON('get_establecimiento', function (result) {
        var mySelect = $('#select_establecimiento').empty();
        $.each(result.data, function (index, value) {
            mySelect.append(new Option(value.name, value.id));
        });
        
        // 初始化multiselect
        mySelect.multiselect({ 
            buttonWidth: '100%',
            refresh: true 
        });

        // 阻止multiselect相关元素的点击事件冒泡
        $('.multiselect').on('click', function(e) {
            e.stopPropagation();
        });
        $('.multiselect-container').on('click', function(e) {
            e.stopPropagation();
        });
    });
}

方法2：全局拦截父Dropdown的关闭触发 #

给父级Dropdown菜单添加全局监听，判断点击目标是否属于multiselect组件，如果是就阻止关闭逻辑：

// 页面加载完成后绑定，无需放在getJSON请求内
$('.dropdown-menu.form-wrapper').on('click', function(e) {
    // 检查点击元素是否属于multiselect组件
    if ($(e.target).closest('.multiselect, .multiselect-container').length) {
        e.stopPropagation();
    }
});

这个方法更省心，一次绑定就能处理所有multiselect的情况，不用每次初始化组件都重复绑定事件。

方法3：手动控制父Dropdown的显示/隐藏 #

如果前两种方法无效，可以尝试手动接管Dropdown的触发逻辑，避免默认的自动关闭行为：

// 手动初始化父Dropdown，禁用默认切换逻辑
$('#btn_navbar').dropdown({
    toggle: false
}).on('click', function(e) {
    e.preventDefault();
    // 手动切换显示状态
    $(this).parent().toggleClass('show');
    $(this).next('.dropdown-menu').toggleClass('show');
});

不过这个方法需要你自己管理Dropdown的显示状态，适合前面方案都解决不了的极端情况。

额外提醒 #

• 确认你的bootstrap-multiselect版本和Bootstrap主版本兼容，版本不匹配很容易引发这类交互冲突；
• 你在getJSON请求完成后再初始化multiselect的做法是对的，避免了DOM未就绪导致的初始化失败问题。

内容的提问来源于stack exchange，提问作者Luis Méndez Méndez