Bootstrap Select菜单展开时显示指定Div的问题求助

这个问题的核心是你用了原生按钮的点击事件来判断菜单状态，但Bootstrap Select组件有自己的一套事件体系，原生的点击逻辑没法准确跟踪它的展开/收起状态，还会忽略点击页面其他区域收起菜单的情况。

我给你一套适配Bootstrap Select的解决方案，利用组件自带的事件来实现需求：

实现思路 #

• Bootstrap Select提供了show.bs.select（菜单展开时触发）和hide.bs.select（菜单收起时触发）两个专属事件，我们可以用这两个事件精准控制帮助Div的显示/隐藏。
• 需要跟踪当前是否有任意一个菜单处于展开状态，这样当多个菜单切换时，只要有一个展开，Div就保持显示。

完整代码示例 #

$(document).ready(function() {
  // 初始化Bootstrap Select组件
  $(".pickerSelectClass").selectpicker();

  // 跟踪当前展开的菜单数量
  let openSelectCount = 0;

  // 监听菜单展开事件
  $(".pickerSelectClass").on("show.bs.select", function() {
    openSelectCount++;
    $("#hidden").show();
  });

  // 监听菜单收起事件
  $(".pickerSelectClass").on("hide.bs.select", function() {
    openSelectCount--;
    // 只有当所有菜单都收起时，才隐藏帮助Div
    if (openSelectCount === 0) {
      $("#hidden").hide();
    }
  });
});

代码细节解释 #

1. openSelectCount变量：用来统计当前处于展开状态的菜单数量，避免单个菜单切换时误隐藏Div。
2. show.bs.select事件：每当任意一个菜单展开，计数加1，同时显示帮助Div。
3. hide.bs.select事件：每当任意一个菜单收起，计数减1；只有当计数归0（所有菜单都收起）时，才隐藏帮助Div。

这个方案完美覆盖了所有场景：点击菜单按钮展开/收起、点击页面其他区域收起菜单、多个菜单切换展开状态等，都能准确控制帮助Div的显示逻辑。

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