bootstrap5冒泡如何解决？

我用bootstrap5写了一个dropdown，我需要运行后，当点击dropdown内的Li时，跳出模态框(也是用bootstrap5写的)，但是我发现需要点击两次才会跳出模态框，请问如何解决？谢谢。

根据描述，100%是代码编写错误。把代码改正确就可以了

1.检查代码
2.事件绑定
3.事件委托

<!-- HTML 代码 -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li class="dropdown-item" data-bs-toggle="modal" data-bs-target="#myModal">选项1</li>
    <li class="dropdown-item" data-bs-toggle="modal" data-bs-target="#myModal">选项2</li>
    <li class="dropdown-item" data-bs-toggle="modal" data-bs-target="#myModal">选项3</li>
  </ul>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        模态框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

<script>
  // JavaScript 代码
  document.addEventListener('click', function(event) {
    var target = event.target;
    if (target.classList.contains('dropdown-item')) {
      var modalTarget = target.getAttribute('data-bs-target');
      var modal = new bootstrap.Modal(document.querySelector(modalTarget));
      modal.show();
    }
  });
</script>

• 你看下这篇博客吧, 应该有用👉 ：Bootstrap4.x Dropdowns选中选项的展示
• 除此之外, 这篇博客: BootStrap3 下拉菜单dropdown中的 带分割线的下拉菜单 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• .divider

  <!-- 带分隔线的下拉菜单 -->
  <div class="container">
      <div class="dropdown">
          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
              带分隔线的下拉菜单 <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-left">
              <li class="divider"></li>
              <li>
                  <a href="#">Chrome</a>
              </li>
              <li>
                  <a href="#">IE</a>
              </li>
              <li>
                  <a href="#">Opera</a>
              </li>
              <li class="divider">浏览器</li>
              <li>
                  <a href="#">Chrome</a>
              </li>
              <li>
                  <a href="#">IE</a>
              </li>
              <li>
                  <a href="#">Opera</a>
              </li>
          </ul>
      </div>
  </div>