Bootstrap 5在悬停时打开下拉菜单，然后单击转到新的url

carvr3hs 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(258)

有没有人有一种方法，使 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;
}

在悬停下拉打开一个大菜单，其中显示了类别列表，但我也希望用户点击下拉文本转到主类别页面，如果这是有意义的。但即使知道我有一个href它不去该页面，因为数据-bs-toggle，任何帮助将不胜感激。

twitter-bootstrap

来源：https://stackoverflow.com/questions/70739334/bootstrap-5-dropdown-open-on-hover-and-click-to-go-to-new-url

2条答案

按热度按时间

1tuwyuhd1#

如果您仍然没有找到答案，请执行以下操作：
在下拉父锚元素中，将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");
    }
});

赞(0）回复(0）举报 2022-12-07

to94eoyn2#

如果你想在 Bootstrap 中显示悬停下拉菜单，那么你需要访问这里，这里是一个非常简单的方法。有较少的CSS代码，你的问题会得到解决，如果你想转到新的URL，你应该在锚标记中添加attriute target="_blank”。
https://www.youtube.com/watch?v=owdqNLzII38

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 5在悬停时打开下拉菜单，然后单击转到新的url

2条答案

相关问题

热门标签

最新问答