Bootstrap 5 导航栏下拉链接在单击时不起作用，并且在悬停时不会展开

Question

我想让导航栏下拉项在悬停时打开，并使所有项目都可单击。我无法工作的是，当我单击它时，将我发送到页面 course.html，我使用 css 打开了悬停工作，但可能有不同的方法吗？

我使用普通的 Bootstrap 5 Java 脚本和 css

所有其他项目都会滚动到 course.html 中的 e 部分，这就是为什么我现在只有 # 。

<div class="col my-auto" style="padding-right: 0;padding-left: 0;">
    <nav class="navbar navbar-expand-lg col">
        <div class="container-fluid">
            <div id="offcanvasNavbar" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header"><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav flex-grow-1 justify-content-end pe-3">
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="home.html" style="font-family: 'Zen Old Mincho', serif;">ホーム</a></li>
                        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="courses.html" role="button">各教室のご案内</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">瑞艸書道教室</a></li>
                                <li><a class="dropdown-item" href="#">日本語教室</a></li>
                                <li><a class="dropdown-item" href="#">いけばな教室</a></li>
                            </ul>
                        </li>
                        <li class="nav-item bg-primary bg-opacity-50"><a class="nav-link active" href="access.html">教室情報</a></li>
                        <li class="nav-item"><a class="nav-link" href="news.html">お知らせ</a></li>
                    </ul>
                </div>
            </div><button class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        </div>
    </nav>
</div>

提前致谢

我尝试了一些方法让它与自定义 JavaScript 一起工作，但没有任何帮助，我删除了它，所以我不再拥有它了。

Answer 1

要使 Bootstrap 菜单下拉菜单在悬停而不是单击时显示，您需要修改 Bootstrap 下拉组件的默认行为。这可以通过当用户将鼠标悬停在下拉触发元素上时使用 CSS 显示下拉菜单来完成，而不是使用 JavaScript 在单击时切换下拉菜单。

假设您已在 HTML 文档中包含 Bootstrap CSS 和 JavaScript 文件，您可以添加自定义 CSS 规则以在下拉菜单上启用悬停，如下所示：

.dropdown:hover .dropdown-menu {
      display: block;
}

然后，您需要将下拉菜单的默认 Bootstrap JavaScript 代码替换为自定义脚本，该脚本会在悬停时触发下拉菜单，如下所示：

$(document).ready(function() {
      $('.dropdown').hover(function() {
        $(this).addClass('show');
        $(this).find('.dropdown-menu').addClass('show');
      }, function() {
        $(this).removeClass('show');
        $(this).find('.dropdown-menu').removeClass('show');
      });
});

请参阅如何使用 Bootstrap 在悬停时制作菜单下拉菜单了解更多信息。