javascript - 默认情况下导航栏下拉项无法隐藏

Question

我创建了 Bootstrap 导航栏，其中包含 dropdown-item，但默认情况下菜单本身无法隐藏。

点击前请查看图片(默认):

点击后:

我的代码:

<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="navbar-brand">
    <img src="img/logo.png" />
</div>

<div class="collapse navbar-collapse">
    <div class="navbar-nav flexbox_basic-spaceAround border-yellow">


        <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle"
               href="#" id="navbarDropdown"
               role="button"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
                Stores
            </a>
            <div id="menu1" 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>
        </div>

        <div class="nav-item">Custom Order</div>
        <div class="nav-item">Industry</div>
        <div class="nav-item">Business</div>

        <div class="nav-item">
            <button class="bg-primary">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</div>

CSS(我使用的是 FlexBox CSS3):

.flexbox_basic-spaceAround {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-around;
    align-items: center;
}

.flexbox_basic-spaceAround div {
    display: flex;
}

顺便说一句，我正在使用 Boostrap 4-beta-2...

有什么想法吗？

提前致谢

Answer 1

首先，您应该为带有类名下拉菜单的 div 提供 display:none， 单击/悬停菜单按钮后，为下拉菜单 div 提供 display:block