如何在 Bootstrap v4 中實現導航欄下拉懸停？

Question

我對新的引導程序版本有點困惑，因為他們將下拉菜單更改為 div：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

你們有沒有想法在該片段的下拉鏈接中獲得懸停下拉菜單而不添加額外的腳本代碼（僅來自引導程序的 css 和腳本）？ 我已經看到了 bootstrap css 類，我無法與 bootstrap V3 中的那些相關聯（我沒有在 V3 中添加 jquery 就完成了這個）。

Answer 1

簡單的、僅 CSS 的解決方案：

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

單擊時，它仍然會將類show切換到它（並且不再懸停時將保持打開狀態）。

---

要正確解決此問題，請使用為基於指針的設備保留的事件和屬性：jQuery 的mouseenter 、 mouseleave和:hover 。 如果工作順利，直觀的，而不是在所有與下拉如何工作的在觸摸設備的干擾。 試試看，讓我知道它是否適合你：

完整的jQuery 解決方案（觸摸未觸及）：

v4.1.2 之前的解決方案（已棄用）：

$('body').on('mouseenter mouseleave','.dropdown',function(e){
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function(){
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  },300);
});

 $('body').on('mouseenter mouseleave','.dropdown',function(e){ var _d=$(e.target).closest('.dropdown'); if (e.type === 'mouseenter')_d.addClass('show'); setTimeout(function(){ _d.toggleClass('show', _d.is(':hover')); $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover')); },300); }); /* this is not needed, just prevents page reload when a dd link is clicked */ $('.dropdown a').on('click tap', e => e.preventDefault())

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href>Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href>Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href>Features</a> </li> <li class="nav-item"> <a class="nav-link" href>Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href>Action</a> <a class="dropdown-item" href>Another action</a> <a class="dropdown-item" href>Something else here</a> </div> </li> </ul> </div> </nav>

---

v4.1.2 shiplist引入了對下拉列表工作方式的更改，使上述解決方案不再有效。
這是在v4.1.2及更高版本中懸停時打開下拉菜單的最新解決方案：

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

 function toggleDropdown (e) { const _d = $(e.target).closest('.dropdown'), _m = $('.dropdown-menu', _d); setTimeout(function(){ const shouldOpen = e.type !== 'click' && _d.is(':hover'); _m.toggleClass('show', shouldOpen); _d.toggleClass('show', shouldOpen); $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen); }, e.type === 'mouseleave' ? 300 : 0); } $('body') .on('mouseenter mouseleave','.dropdown',toggleDropdown) .on('click', '.dropdown-menu a', toggleDropdown); /* not needed, prevents page reload for SO example on menu link clicked */ $('.dropdown a').on('click tap', e => e.preventDefault())

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>

---

重要提示：如果使用 jQuery 解決方案，刪除 CSS 很重要（否則在單擊.dropdown-toggle或單擊菜單選項時下拉菜單不會關閉）。

Answer 2

只需在您的樣式表中添加這個簡單的css代碼，您就可以開始使用了。

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

Answer 3

Bootstrap 4 僅 CSS

沒有一個 CSS 只有答案完全有效。 單擊后下拉菜單保持打開狀態，或者在您可以到達要單擊的菜單鏈接之前，有一個間隙使下拉菜單隱藏。

這是僅使用 CSS 的簡單解決方案：

.navbar-nav li:hover .dropdown-menu {
    display: block;
}

從 HTML 標記中刪除data-toggle=dropdown以防止下拉列表在單擊時保持打開狀態。 使用mt-0 (margin-top:0) 消除菜單上方的間隙，並使懸停菜單項成為可能。

演示https://www.codeply.com/go/awyU7VTIJf

---

完整代碼：

   .navbar-nav li:hover .dropdown-menu {
        display: block;
    } 

   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      ..
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
              Dropdown
            </a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>   

Answer 4

Andrei 的“完整” jQuery+CSS 解決方案具有正確的意圖，但它冗長而且仍然不完整。 不完整，因為雖然它可能涵蓋了所有必要的 DOM 更改，但它缺少 自定義事件的觸發。 冗長，因為當 Bootstrap 已經提供dropdown() 方法時它是輪子重新發明，它可以完成所有事情。

因此，不依賴於其他答案中經常重復的 CSS hack 的正確的 DRY 解決方案就是 jQuery ：

$('body').on('mouseover mouseout', '.dropdown', function(e) {
    $(e.target).dropdown('toggle');
});

Answer 5

自 v4 發布以來，Bootstrap 的功能似乎略有變化。 該.dropdown-menu項出現到現在也得到了.show類除了.dropdown 。 我改編了安德烈的回答，也可以在.dropdown-menu上切換課程。 請注意，不再需要 CSS 並且 HTML 是相同的，除了我更新了當前版本的鏈接並且 nav 類更改為navbar-expand-md 。

 $('body').on('mouseenter mouseleave', '.dropdown', function (e) { var dropdown = $(e.target).closest('.dropdown'); var menu = $('.dropdown-menu', dropdown); dropdown.addClass('show'); menu.addClass('show'); setTimeout(function () { dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show'); menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show'); }, 300); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav>

Answer 6

當我被要求將其更改為懸停交互時，我已經使用並設置了導航欄的樣式，因此最終將其作為使用 jQuery 的修復程序。

function bootstrapHoverMenu (bp = 768) {

  // close all dropdowns that are open
    $('body').click( function (e) {
    $('.dropdown-menu.show').removeClass('show');
  });

  // show dropdown for the link clicked
  $('.nav-item').hover(function (e) {
    $('.dropdown-menu.show').removeClass('show');
    if(( $(window).width() >= bp )) {
      $dd = $(this).find('.dropdown-menu');
      $dd.addClass('show');
    }
  });

  // get href for top level link if clicked and open
  $('.dropdown').click(function (e) {
    if( $(window).width() < bp ) {
      $('.dropdown-menu').css({'display': 'none'});
    }
    $href = $(this).find('.nav-link').attr('href');
    window.open($href, '_self');
  });
}

$(document).ready( function() {
   // when page ready run the fix
   bootstrapHoverMenu();
});

缺點是移動設備只有頂級鏈接。

Answer 7

Bootstrap v4 解決方案 - 基於 jQuery，但比純 css 解決方案更好

這可確保您仍然可以關注頂級鏈接點擊次數並與移動設備兼容。

這是在考慮桌面和移動設備的情況下構建的。 隨意用一個檢查窗口寬度是否大於 768px 的條件來包裝 jQuery。

jQuery

/** Dropdown on hover */
$(".nav-link.dropdown-toggle").hover( function () {
    // Open up the dropdown
    $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
    $(this).parent().addClass('show'); // add the class show to the li parent
    $(this).next().addClass('show'); // add the class show to the dropdown div sibling
}, function () {
    // on mouseout check to see if hovering over the dropdown or the link still
    var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
    var isThisHovered = $(this).filter(":hover").length;  // check the top level item for hover
    if(isDropdownHovered || isThisHovered) {
        // still hovering over the link or the dropdown
    } else {
        // no longer hovering over either - lets remove the 'show' classes
        $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
        $(this).parent().removeClass('show');
        $(this).next().removeClass('show');
    }
});
// Check the dropdown on hover
$(".dropdown-menu").hover( function () {
}, function() {
    var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
    var isThisHovered= $(this).filter(":hover").length;  // check the top level item for hover
    if(isDropdownHovered || isThisHovered) {
        // do nothing - hovering over the dropdown of the top level link
    } else {
        // get rid of the classes showing it
        $(this).parent().removeClass('show');
        $(this).removeClass('show');
    }
});

CSS

@media(min-width:  768px) {
  .dropdown-menu {
    margin-top: 0; // fixes closing on slow mouse transition
  }
}

Answer 8

可懸停下拉菜單，而不會丟失 popper.js 的功能，僅適用於 bootstrap 4

Javascript

$('.dropdown-hoverable').hover(function(){
    $(this).children('[data-toggle="dropdown"]').click();
}, function(){
    $(this).children('[data-toggle="dropdown"]').click();
});

HTML

<nav class="nav">
  <li class="nav-item dropdown dropdown-hoverable">
    <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">Menu link</a>
    <ul class="dropdown-menu">
    </ul>
  </li>
</nav>

Answer 9

此解決方案打開和關閉

<script>
$(document).ready(function() {
  // close all dropdowns that are open
  $('body').click(function(e) {
      $('.nav-item.show').removeClass('show');
      //$('.nav-item.clicked').removeClass('clicked');
      $('.dropdown-menu.show').removeClass('show');
  });

  $('.nav-item').click( function(e) {
    $(this).addClass('clicked')
  });

  // show dropdown for the link clicked
  $('.nav-item').hover(function(e) {
      if ($('.nav-item.show').length < 1) {
        $('.nav-item.clicked').removeClass('clicked');
      }
      if ($('.nav-item.clicked').length < 1) {
          $('.nav-item.show').removeClass('show');
          $('.dropdown-menu.show').removeClass('show');
          $dd = $(this).find('.dropdown-menu');
          $dd.parent().addClass('show');
          $dd.addClass('show');
      }
  });
});</script>

要禁用 lg 大小的折疊菜單的懸停添加

if(( $(window).width() >= 992 )) {

Answer 10

CSS 解決方案在觸摸設備上無法正常工作

我發現任何 CSS 解決方案都使菜單在觸摸設備上保持打開狀態，它們不再折疊。

所以我讀了這篇文章： https : //www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ （作者：Brian Shim）
很有用！ 它指出觸摸設備總是首先檢查元素上是否存在懸停類。

但是：通過使用 jQuery .show() 您引入了一個樣式屬性 (display:block;)，它使菜單在第一次觸摸時打開。 現在菜單已經打開，沒有引導程序“顯示”類。 如果用戶從下拉菜單中選擇一個鏈接，它就可以完美運行。 但是如果用戶決定不使用它就關閉菜單，他必須點擊兩次才能關閉菜單：在第一次點擊時，原始引導程序“show”類被附加，因此菜單再次打開，在第二次點擊時菜單關閉到正常的引導行為（刪除“顯示”類）。

為了防止這種情況，我使用了這篇文章： https : //codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 （David Gilbertson）

他有一些非常方便的方法來檢測觸摸或懸停設備。

因此，將兩位作者與我自己的一些 jQuery 結合起來：

$(window).one('mouseover', function(){
      window.USER_CAN_HOVER = true;
      if(USER_CAN_HOVER){
          jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
             var $parent = jQuery(this);
             var $dropdown = $parent.children('ul');

             $dropdown.show(200,function() { 
               $parent.mouseleave(function() {
                 var $this = jQuery(this);
                 $this.children('ul').fadeOut(200);
               });
             });
          });
      };

}); 檢查一次設備是否允許懸停事件。 如果是，請引入使用 .show() 懸停的可能性。 如果設備不允許懸停事件，則 .show() 永遠不會被引入，因此您可以在觸摸設備上獲得自然的引導行為。

請務必刪除有關菜單懸停類的任何 CSS。

我花了三天 :) 所以我希望它可以幫助你們中的一些人。

Answer 11

1. 移除 data-toggle="dropdown" 屬性（所以點擊不會打開下拉菜單）

2. 添加 :hover 偽類以顯示下拉菜單

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav>

Answer 12

我認為這僅適用於 bootstrap 4，我添加了內聯，但您始終可以從腳本綁定事件。

  <a 
onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
class="nav-link dropdown-toggle" 
href="http://example.com" 
id="navbarDropdownMenuLink" 
data-toggle="dropdown" 
aria-haspopup="true" 
aria-expanded="false">
      Dropdown link
    </a>

Answer 13

我使用 bootstrap 4.0.0，因為我們想模擬.show來懸停事件，這很簡單。 只需將.dropdown.show .dropdown-menu中的所有樣式添加到:hover 。 像這樣：

.dropdown:hover>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0px, 0px, 0px);
}

Answer 14

 $('body').on('mouseenter mouseleave','.dropdown',function(e){ var _d=$(e.target).closest('.dropdown'); if (e.type === 'mouseenter')_d.addClass('show'); setTimeout(function(){ _d.toggleClass('show', _d.is(':hover')); $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover')); },300); }); /* this is not needed, just prevents page reload when a dd link is clicked */ $('.dropdown a').on('click tap', e => e.preventDefault())

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href>Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href>Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href>Features</a> </li> <li class="nav-item"> <a class="nav-link" href>Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href>Action</a> <a class="dropdown-item" href>Another action</a> <a class="dropdown-item" href>Something else here</a> </div> </li> </ul> </div> </nav>

Answer 15

僅 CSS 和桌面解決方案

@media (min-width: 992px) { 
.dropdown:hover>.dropdown-menu {
  display: block;
}
}

Answer 16

兩種頂級解決方案都不適合我。

這完美地工作，在瀏覽時保持子菜單打開，添加使用本機 Bootstrap javascript。

// Mouse over
$('body').on('mouseover', '.dropdown', function(e) { 
    $(this).children('.dropdown-toggle').dropdown('show');
});

// Mouse leave
$('body').on('mouseleave', '.dropdown', function(e) { 
    $(this).children('.dropdown-toggle').dropdown('hide');
});

Answer 17

谷歌把我帶到這里但是......如果下拉菜單在顯示時與其父級重疊（至少 1px），則示例提供了工作。 如果沒有，它會失去焦點並且沒有任何效果。

這是一個使用 jQuery 和 Bootstrap 4.5.2 的工作解決方案：

$('li.nav-item').mouseenter(function (e) {

        e.stopImmediatePropagation();

        if ($(this).hasClass('dropdown')) {

            // target element containing dropdowns, show it
            $(this).addClass('show');
            $(this).find('.dropdown-menu').addClass('show');

            // Close dropdown on mouseleave
            $('.dropdown-menu').mouseleave(function (e) {
                e.stopImmediatePropagation();
                $(this).removeClass('show');
            });

            // If you have a prenav above, this clears open dropdowns (since you probably will hover the nav-item going up and it will reopen its dropdown otherwise)
            $('#prenav').off().mouseenter(function (e) {
                e.stopImmediatePropagation();
                $('.dropdown-menu').removeClass('show');
            });

        } else {
            // unset open dropdowns if hover is on simple nav element
            $('.dropdown-menu').removeClass('show');
        }
    });

Answer 18

我在這里找不到完整的解決方案。 所以，這是我的一個與 Bootstrap v4.4.1 一起使用並具有以下好處：

• 單擊dropdown-toggle可用作普通導航鏈接。

• 支持任何嵌套級別的下拉菜單。

• Bootstrap 4 {show/shown/hide/hidden}.bs.dropdown事件運行良好。

   // Toggles a B4 dropdown-menu to a given state. const toggleDropdownElement = ($dropdown, shouldOpen = false) => { const $dropdownToggle = $dropdown.children('[data-toggle="dropdown"], a'); const $dropdownMenu = $dropdown.children('.dropdown-menu'); // Change the dropdown menu. It's similar to B4 Dropdown.show()/.hide(), see /bootstrap/js/src/dropdown.js. if (shouldOpen) { $dropdown.trigger('show.bs.dropdown'); $dropdownToggle.attr('aria-expanded', true).focus(); $dropdownMenu.addClass('show'); $dropdown.addClass('show').trigger($.Event('shown.bs.dropdown', $dropdownMenu[0])); } else { $dropdown.trigger('hide.bs.dropdown'); $dropdownToggle.attr('aria-expanded', false); $dropdownMenu.removeClass('show'); $dropdown.removeClass('show').trigger($.Event('hidden.bs.dropdown', $dropdownMenu[0])); } }; // Toggles a B4 dropdown-menu with any nesting level. const toggleDropdown = (event) => { const $dropdown = $(event.target).closest('.dropdown'); const $parentDropdownMenu = $dropdown.closest('.dropdown-menu'); const shouldOpen = event.type !== 'click' && $dropdown.is(':hover'); // If the dropdown was closed already, break the 'mouseleave' event cascade. if (!shouldOpen && !$dropdown.hasClass('show')) return; // Change the current dropdown menu (last nested). toggleDropdownElement($dropdown, shouldOpen); // We have to close the dropdown menu tree if it was a click or the menu was leave at all. if (event.type === 'click' || $parentDropdownMenu.length && !$parentDropdownMenu.is(':hover')) { $dropdown.parents('.dropdown').each((index, element) => { toggleDropdownElement($(element), false); }); } }; if (viewport && viewport.is('>=xl')) { $('body') .on('mouseenter mouseleave', '.dropdown', toggleDropdown) .on('click', '.dropdown-menu a', toggleDropdown); // Disable the default B4's click. Other words, change a dropdown-toggle to a normal nav link. $(document).off('click.bs.dropdown', '[data-toggle="dropdown"]'); $(document).off('click.bs.dropdown.data-api', '[data-toggle="dropdown"]'); // Not sure about it. }

如果您不使用 ES6，只需將箭頭函數更改為舊函數樣式。

謝謝，@tao 舉個例子，這對我很有幫助。

代碼相關鏈接： B4 下拉事件、 視口（響應式引導工具包） 、 WP Bootstrap Navwalker 。

Answer 19

只需使用 Tao 的 CSS 代碼：

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

並通過將其 top-margin 設置為零來刪除 .dropdown-toggle 和 .dropdown-menu 之間的 2px-gap：

.dropdown-menu { margin-top: 0!important }

Answer 20

我正在使用 bootstrap 5，上面的解決方案看起來很大我剛剛刪除了data-bs-toggle='dropdown'因為它阻止了父鏈接導航並切換腳本以在單擊時打開下拉列表。

並添加了 CSS

.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    // removes the gap so it doesn't close ;
}

對我來說很好用

Answer 21

（2020 年 6 月）我找到了這個解決方案，我想我應該把它貼在這里：

引導程序版本： 4.3.1

CSS部分：

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear;
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.dropdown-menu {
  margin-top: 0;
}

jQuery 部分：

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
  if (this.matchMedia("(min-width: 768px)").matches) {
    $dropdown.hover(
      function() {
        const $this = $(this);
        $this.addClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "true");
        $this.children($dropdownMenu).addClass(showClass);
      },
      function() {
        const $this = $(this);
        $this.removeClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "false");
        $this.children($dropdownMenu).removeClass(showClass);
      }
    );
  } else {
    $dropdown.off("mouseenter mouseleave");
  }
});

來源： https : //webdesign.tutsplus.com/tutorials/how-to-make-the-bootstrap-navbar-dropdown-work-on-hover--cms-33840

Answer 22

<div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">