BOOTSTRAP5如何阻止冒泡

Question

这是我用bootstrap5写的dropdown，但是出现了冒泡事件，该怎么处理啊？

<nav class="navbar navbar-expand-lg bg-body-tertiary" style="padding-left: 100px;background-color: #0d6efd">
                    <div class="container-fluid" >
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                       aria-expanded="false" style="font-size: 16px;color: #fff">
                                        开始考试
                                    </a>
                                    <ul class="dropdown-menu" id="c" >
                                        <li><a class="dropdown-item" href="#">Action</a></li>
                                        <li><a class="dropdown-item" href="#">Another action</a></li>
                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

这是我用bootstrap5写的dropdown的HTML，以下是JS部分

  $(document).ready(function () {
        $('#c').on('click', 'li a', function () {
            var level = $(this).attr('value');
            var subject = $(this).attr('title')
            get_test(subject, level, $(this))
        })
    })

**
我需要做的是：当我点击了下拉菜单后选中其中某个项，再弹出模态框。但是现在的问题是只有点击2次才会出现模态框也就是出现了冒泡事件，查阅了很多资料教我怎么处理，但似乎都没啥用。请大家帮忙。**

Answer 1

• 这篇博客也许可以解决你的问题👉 ：点击bootstrap dropdown下拉菜单无反应 解决方法
• 除此之外, 这篇博客: Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现中的 2) 实现思考 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 一般遇到这种不会的问题就是上网找类似。无果，主要因为太菜。然后就找到了一个bootstrap的插件，虽然背离了初衷的样式，但是差不多可以实现。使用插件的确比自己创作来的简单些。