Bootstrap 5 下拉菜单在悬停时打开并单击以转到新网址答案

【问题标题】：Bootstrap 5 dropdown open on hover and click to go to new urlBootstrap 5 下拉菜单在悬停时打开并单击以转到新网址
【发布时间】：2023-01-03 01:44:48
【问题描述】：

有没有人有办法在悬停时打开 bootstrap 5 下拉导航，然后也可以在单击时转到另一个页面。

例如我的下拉菜单看起来像这样：

<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>

并使用 CSS 使其在悬停时打开

.dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0;
}

悬停时，下拉菜单会打开一个显示类别列表的 megamenu，但如果有意义的话，我还希望用户单击下拉文本以转到主类别页面。但即使知道我有一个 href，它也不会因为 data-bs-toggle 而转到该页面，我们将不胜感激。

【问题讨论】：

确保你的路径是正确的
href 路径是正确的。问题是当点击 a 标签时它在浏览器中没有做任何事情，甚至没有设置为 # 如果我将 href 设置为那个
现在还有其他人可以解决这个问题吗？

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

如果您仍然没有找到答案，请执行以下操作：

在下拉父锚元素中，将 data-bs-toggle="dropdown" 更改为 data-bs-hover="dropdown"。而已。现在您的父链接也可以使用了。

但是，下拉列表需要 data-bs-toggle 属性才能在移动设备（小分辨率屏幕）上工作，所以我的解决方案是使用 jQuery 在较小的屏幕上恢复它，如下所示：

$(document).ready(function() {
    if($(window).width() <= 831) {
        $(".nav-link.dropdown-toggle").removeAttr("data-bs-hover");
        $(".nav-link.dropdown-toggle").attr("data-bs-toggle", "dropdown");
    }
});

【讨论】：

【解决方案2】：

我只是在我的CSS中添加这段代码

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

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

【讨论】：

【解决方案3】：

如果你想在 bootstrap 中悬停时显示下拉菜单，那么你需要访问这里，这是非常简单的方法。 css 代码数量较少，您的问题将得到解决，如果您想转到新网址，您应该在锚标记中添加 attriute target="_blank"。

https://www.youtube.com/watch?v=owdqNLzII38

【讨论】：

这是一个仅链接的答案：请用代码示例回答问题。