Bootstrap Select Picker在Dropdown-Menu中异常：选择选项后无法关闭的问题及修复

最近在项目里用Bootstrap Select Picker替换普通HTML下拉菜单时，踩了不少坑，其中最闹心的就是选择完选项后下拉面板不会自动关闭这个问题。试了好几种常规方法都没解决，最后自己写了一段事件监听代码搞定了，分享给大家：

$('body').on('click', function (e) {
  var target = $(e.target);
  // 仅针对Bootstrap Select组件内的<a>标签触发，避免影响其他页面元素
  if (target.parents('.bootstrap-select').length && target.is("a")) {
    e.stopPropagation();
    // 手动触发下拉切换按钮，强制关闭下拉面板
    target.parents('.bootstrap-select').find('.dropdown-toggle').dropdown('toggle');
  }
});

代码逻辑说明： #

• 给body绑定全局点击事件，监听页面上的所有点击动作
• 先判断点击的目标元素是否属于Bootstrap Select组件的后代，并且是<a>标签（这里限定<a>是因为我只想让这段代码作用于自己下拉菜单里的选项，避免干扰页面上其他的Bootstrap组件）
• 符合条件时，先阻止事件冒泡防止触发其他冲突的事件，然后手动调用下拉切换按钮的dropdown('toggle')方法，强制关闭下拉面板

内容的提问来源于stack exchange，提问作者Mr. Blockchain