如何在Bootstrap 3菜單上刪除插入符並在懸停時顯示下拉列表？

Question

我已經在我的Wordpress主題上設置了Bootstrap 3，並且我已經在移動設備上正確運行了子菜單（灰色箭頭表示它是一個點擊時打開的下拉菜單）。

在桌面上我希望下拉列表在沒有箭頭圖像的情況下懸停工作。 有沒有辦法在不影響移動布局的情況下做到這一點？ 看到這個 。

Answer 1

我明白了，你不希望用戶在桌面上看到“插入符號”。 這可以通過最少量的媒體查詢來實現。 它應該是這些方面的東西。 我從Bootstrap 3 Docs獲得了桌面斷點媒體查詢代碼。

@media (min-width: 1200px) {
  .navbar-nav .caret {
  display:none;
 }

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

Answer 2

您可以使用Jquery hover來激活下拉列表

試試這個

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
    if($(window).width() > 750)
    {
    $('b.caret').hide() 
    }
});

DEMO