下拉菜单 open/close

Question

我使用 Bootstrap5 的导航栏菜单。我的下拉菜单无法打开或关闭

我添加了一个 jquery 功能，下拉菜单只能打开但不能关闭顶部

$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu').addClass('show');
});
$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu.show').removeClass('show');
});

Answer 1

只需将 addClass 更改为 toggleClass 并删除第二次点击检测：

$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu').toggleClass('show');
});

Answer 2

没有理由在 Bootstrap 中使用 jQuery 5. 只需确保您在下拉切换器上使用适当的 data-bs- 属性..

 <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
 </li>

Demo

下拉菜单 open/close

Dropown menu open/close

wordpress

jquery

bootstrap-5