BOOTSTRAP5如何阻止冒泡

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

img

<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部分

img


  $(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次才会出现模态框也就是出现了冒泡事件，查阅了很多资料教我怎么处理，但似乎都没啥用。请大家帮忙。**

你好像对事件冒泡有什么误解，下面给你普及一下什么是事件冒泡。

事件冒泡(Event Bubbling) 是指当一个元素上的事件被触发时，该事件会从最具体的元素开始逐级向上传播，直到最顶层的元素(通常是文档对象)被触发。
举个例子，如果一个按钮嵌套在一个 div 元素中，并且同时绑定了一个点击事件，当点击按钮时，按钮的点击事件会被触发，并且该事件会从按钮元素开始冒泡，逐级向上传递，直到 div 元素和文档对象被触发。

```
有没有可能是你弄了a标签，导致第一次点击的时候进行了页面跳转，第二次点击没有跳转页面了才会出现模态框