Bootstrap 3.3.7中点击Modal时保持Dropdown展开的原生JS实现

问题：Dropdown菜单内的按钮点击后打开Modal弹窗，但点击Modal内容时Dropdown菜单会意外关闭。需要实现点击Modal内容时保持Dropdown展开，点击弹窗以外的其他元素时关闭Dropdown菜单。

解决思路 #

1. 阻止Modal触发按钮的点击事件冒泡，避免Dropdown因内部按钮点击而触发关闭逻辑；
2. 阻止Modal内容区域的事件冒泡，防止点击Modal内容时事件传递到Dropdown的关闭机制；
3. 监听Modal的关闭事件，在Modal关闭时同步关闭Dropdown；同时点击Modal背景（弹窗外部）时，关闭Dropdown和Modal。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li>
        <div>
          <p>
          Hello World!
          </p>
          <button type="button" id="btn1" data-toggle="modal" data-target="#myModal">
          coba
          </button>
        </div>
      </li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
// 阻止Modal触发按钮的事件冒泡，避免Dropdown关闭
$('#btn1').on('click', function(e) {
  e.stopPropagation();
});

// 阻止Modal内容区域的事件冒泡，点击Modal内容时不触发Dropdown关闭逻辑
$('#myModal').on('click', '.modal-content', function(e) {
  e.stopPropagation();
});

// 点击Modal背景时，同时关闭Dropdown和Modal
$('#myModal').on('click', function() {
  $('.dropdown').removeClass('open');
});

// Modal关闭时，同步关闭Dropdown，保持界面状态一致
$('#myModal').on('hidden.bs.modal', function() {
  $('.dropdown').removeClass('open');
});
</script>

</body>
</html>

代码说明 #

• e.stopPropagation()：中断事件向上冒泡，避免触发Bootstrap Dropdown默认的外部点击关闭逻辑；
• hidden.bs.modal：监听Modal的关闭事件，确保Modal关闭时Dropdown同步关闭，避免界面状态混乱；
• 点击Modal背景时直接关闭Dropdown，满足“点击弹窗以外元素关闭Dropdown”的需求。

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