有沒有人有辦法讓一個引導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，但由于data-bs-toggle，它不會轉到該頁面，任何幫助都將不勝感激。

# # #如果你仍然沒有找到答案，以下是你需要做的:

在下拉父錨元素中，將data-bs-toggle = & quot；下拉菜單& quotto data-bs-hover = & quot；下拉菜單& quot。就是這樣。現在你的父鏈接也可以工作了。

但是，下拉菜單需要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");
    }
});

# # #我只是將這段代碼添加到我的css中

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

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

# # #我發現添加以下jQuery代碼可以解決這個問題:

// Show dropdown on hover
$('.dropdown').mouseover(function () {
    if($('.navbar-toggler').is(':hidden')) {
        $(this).addClass('show').attr('aria-expanded', 'true');
        $(this).find('.dropdown-menu').addClass('show');
    }
}).mouseout(function () {
    if($('.navbar-toggler').is(':hidden')) {
        $(this).removeClass('show').attr('aria-expanded', 'false');
        $(this).find('.dropdown-menu').removeClass('show');
    }
});

// Go to the parent link on click
$('.dropdown > a').click(function(){
    location.href = this.href;
});

這確實給移動使用帶來了問題，解決方案是將上面的代碼封裝在if語句中，該語句在執行代碼之前檢查瀏覽器寬度。這確實意味著移動用戶仍然不能訪問父頁面。

我的解決方案是在移動菜單中永久擴展下拉菜單。

###hii的人從數據中刪除dropdwon-bs-toggle就是這樣，沒有任何css或js

###如果你想在引導中顯示下拉菜單，那么你需要訪問這里，這里有一個非常簡單的方法。有更少的css代碼，你的問題會得到解決，如果你想去新的網址，你應該添加attriute target = & quot_ blank & quot在錨定標簽中。

https://www.youtube.com/watch? v = owdqnlzii 38