Bootstrap4下拉列表仅在第二次单击时有效

Question

嘿伙计们,我正在研究一个正在使用bootstrap4的django项目,而且我在使用dropdown toggler时遇到了一些问题......

切换器仅在第二个链接后切换下拉菜单!

我做错了什么？

这是我的下拉HTML代码:

            <li class="nav-item dropdown show">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown Toggler
                </a>
                <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
                 <a class="dropdown-item">Link 1</a>
                 <a class="dropdown-item">Link 2</a>
                </div>
            </li>

Answer 1

我遇到了同样的问题然后解决了.通常我是由于引导js库的双重导入.希望能帮到你.

Answer 2

您需要使用类似的切换并将data-targetID 分配给下拉菜单

使用

data-target =“＃navbarDropdown”

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

然后将该ID分配给菜单

        <li class="nav-item dropdown show">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            <div id="navbarDropdown" class="dropdown-menu"  role="menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item">Link 1</a>
             <a class="dropdown-item">Link 2</a>
            </div>
        </li>