jquery - 下拉菜单打开/关闭

Question

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

我添加了一个 jquery 函数，并且下拉菜单仅用于打开而不是顶部关闭

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

Answer 1

没有理由在 Bootstrap 5 中使用 jQuery。只需确保您在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>

演示

Answer 2

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

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