Bootstrap 4中实现点击页面任意区域时保留.legal-doc-dropdown的.show类

嘿，我仔细看了你的问题和代码，问题的核心在于Bootstrap 4原生的Dropdown插件在干扰你的自定义逻辑！你的按钮上带了data-toggle="dropdown"属性，这会自动触发Bootstrap的原生下拉组件，它内置了点击页面外部就关闭下拉的逻辑，所以哪怕你自己写了stopPropagation，原生插件还是会偷偷移除show类。

给你两个关键修改点，就能彻底解决这个问题：

步骤1：禁用Bootstrap原生的Dropdown插件 #

因为你已经自己实现了下拉的打开/关闭逻辑，完全不需要原生插件来掺和。我们可以在代码里销毁原生插件的实例，同时移除触发它的属性：

jQuery(document).ready(function() {
  // 先销毁Bootstrap原生的Dropdown插件，避免干扰
  jQuery(".legal-doc-dropdown .dropdown-toggle").dropdown('dispose');
  // 移除触发原生插件的data-toggle属性
  jQuery(".legal-doc-dropdown .dropdown-toggle").removeAttr('data-toggle');

  // 以下是你原来的自定义逻辑，保留不变
  // Open the first dropdown on page load
  jQuery(".legal-doc-dropdown:first .dropdown-menu").addClass("show");
  jQuery(".legal-doc-dropdown:first").addClass("show");

  // Click event for dropdowns
  jQuery(".dropdown-toggle").click(function(event) {
    event.stopPropagation(); // Prevent event bubbling

    var $thisDropdown = jQuery(this).next(".dropdown-menu");
    var $thisParent = jQuery(this).closest(".legal-doc-dropdown");

    // Check if the clicked dropdown is already open
    var isOpen = $thisParent.hasClass("show");

    // Close all dropdowns
    jQuery(".dropdown-menu").removeClass("show");
    jQuery(".legal-doc-dropdown").removeClass("show");

    // If it was not open, then open it
    if (!isOpen) {
      $thisDropdown.addClass("show");
      $thisParent.addClass("show");
    }
  });

  // Prevent dropdown from closing when clicking inside it
  jQuery(".dropdown-menu").click(function(event) {
    event.stopPropagation();
  });
});

步骤2：简化版替代方案（可选） #

如果你不想修改JS代码，也可以直接在HTML里把按钮的data-toggle="dropdown"属性删掉，这样原生插件就不会初始化，效果和上面完全一致。

效果验证 #

现在你的下拉逻辑完全由自定义代码控制：

• 页面加载时默认打开第一个下拉
• 点击切换按钮可以自由切换下拉的打开/关闭状态
• 点击下拉菜单内部不会触发关闭
• 点击页面任何其他区域，已打开的下拉会一直保持show类，不会自动关闭

备注：内容来源于stack exchange，提问作者Samrat Barot