jquery - 如何在 Bootstrap 4 中悬停时激活导航下拉菜单？

Question

我正在寻找一种在桌面上悬停时激活导航菜单的方法。

我找到了 Bootstrap v3 的代码片段，但我发现这些代码都无法转换为 v4。

这是我的 http://beaudeelashbar.com 的导航 HTML 和 CSS :

    <nav class="navbar navbar-dark fixed-top scrolling-navbar">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx2" aria-controls="collapseEx2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="index.html">
        </a>
        <div class="collapse navbar-collapse" id="collapseEx2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/packages">Packages & Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/faq">FAQ</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

.navbar:hover .nabvar-collapse {
display: block;
}

.navbar .navbar-collapse {
background-color: rgba(0, 0, 0, 0.2);
width: 200px;
float: right;
margin-top: 47px;
margin-right: -17px;
}

.navbar-dark .navbar-nav .nav-link {
color: #fff;
}

.nav-item {
padding-right: 15px;
}

.nav-link {
float: right;
}

.scrolling-navbar {
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
    height: 55px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

.top-nav-collapse {
background-color: transparent;
}

Answer 1

试试这段代码

button.navbar-toggler:hover ~ .navbar-collapse {
    display: block;
}

最好尝试使用 <ul> 和 <li> 用于下拉菜单，因为下拉菜单仅在我们悬停按钮元素时出现。这不是我们需要的。所以最好使用 <ul> 创建下拉列表 和 <li> 元素。

希望这能奏效..