我找不到一個讓Bootstrap 4在懸停(桌面)和點(diǎn)擊(移動)時打開下拉菜單的解決方案。我找到的所有解決方案都在使用jQuery——有人知道沒有那個庫該怎么做嗎？

# # #您可以通過添加該類輕松實(shí)現(xiàn)這一效果。向大自然展示。下拉-切換和。使用純JavaScript的下拉菜單:

const dropdown = document.querySelector('.dropdown');
const dropdownToggle = document.querySelector('.dropdown .dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown .dropdown-menu');

['mouseover', 'click'].forEach(e => {
  dropdown.addEventListener(e, function() {
    dropdownToggle.classList.add("show");
    dropdownMenu.classList.add("show");
  });
});

dropdown.addEventListener('mouseout', function() {
  dropdownToggle.classList.remove("show");
  dropdownMenu.classList.remove("show");
});

<!-- CSS only -->
<link rel="stylesheet"  integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

# # #你可以用一種簡單的方法來實(shí)現(xiàn)，比如使用CSS:

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

###Bootstrap 4正在使用jQuery，沒有第二個就不能使用第一個。

為此，您可以在JavaScript中使用兩個不同的事件偵聽器(如果您想在懸停后關(guān)閉下拉列表，可以使用三個)，如下所示:

dropdownElement.addEventListener('click', function() {
    . . .
});
dropdownElement.addEventListener('mouseover', function() {
    . . .
});
dropdownElement.addEventListener('mouseout', function() {
    . . .
});