Bootstrap 4下拉菜单点击外部关闭问题：Codeply可用本地项目无效

看起来你遇到的核心问题是jQuery选择器写法错误，以及事件绑定逻辑没有正确适配Bootstrap的下拉菜单事件机制——这就是为什么Codeply示例能正常运行，但你的本地代码失效的原因。

问题分析 #

你代码里的$('IF NOT -> #dropdownMenuLogin')是完全无效的jQuery选择器语法，这段代码根本没被正确执行，自然无法控制下拉菜单的关闭行为。另外，你对closable状态的控制逻辑也不够清晰，没有准确区分“点击触发按钮”和“点击外部/内部其他区域”的场景。

修正后的代码方案 #

结合你使用的jQuery 3.4.1和Bootstrap 4.0.0，我们可以通过以下步骤实现需求：

1. HTML结构保持不变（你的HTML部分是没问题的）：

<li class='keep-open'>
 <a id='dropdownMenuLogin' class='nav-link badge no-style-for-badge' data-toggle='dropdown' href='#'>Login</a>
 <!-- Dropdown login begins here -->
 <ul class='dropdown-menu dropdown-menu-login mt-1'>
 <li class='p-3'>
 <form method='POST' id='loginFormHeader'>
 <!-- Login code should be here -->
 </form>
 </li>
 </ul>
</li>

2. 修正后的jQuery代码：

// 给带keep-open类的下拉容器绑定核心事件
$('.keep-open').on({
  // 下拉菜单显示时，默认设置为不可关闭
  "shown.bs.dropdown": function() {
    this.closable = false;
  },
  // 点击下拉菜单内部（包括表单）时，保持不可关闭状态
  "click": function() {
    this.closable = false;
  },
  // 仅点击触发按钮时，设置为可关闭状态
  "click #dropdownMenuLogin": function() {
    this.closable = true;
  },
  // 在hide事件中根据closable状态决定是否允许关闭
  "hide.bs.dropdown": function() {
    const allowClose = this.closable;
    // 重置状态，避免下一次打开时异常
    this.closable = false;
    return allowClose;
  }
});

// 拦截页面其他区域的点击，防止Bootstrap默认的外部关闭逻辑生效
$(document).on('click', function(e) {
  const $target = $(e.target);
  // 如果点击的不是触发按钮，也不是下拉菜单内部元素，阻止下拉关闭
  if (!$target.closest('#dropdownMenuLogin').length && !$target.closest('.dropdown-menu-login').length) {
    $('.keep-open').data('bs.dropdown').toggle();
  }
});

关键说明 #

• 我们用jQuery事件委托监听触发按钮的点击，确保只有点击#dropdownMenuLogin时才会将closable设为true，允许下拉关闭。
• 在hide.bs.dropdown事件中返回closable的值，Bootstrap会根据这个返回值决定是否执行关闭操作。
• 额外的document点击事件拦截，是为了覆盖Bootstrap默认的“点击外部关闭下拉”逻辑，确保点击页面其他区域时菜单保持打开。

这样修改后，下拉菜单就只会在你点击Login按钮时关闭，点击菜单内部的表单区域或者页面其他外部区域都会保持菜单打开状态，和你参考的示例效果完全一致。

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