Bootstrap 3.3.7，第一次点击同一个导航栏下拉项后，导航栏下拉菜单没有关闭

Question

问题是，如果我的导航栏中有 3 个下拉菜单并按此顺序或任何其他顺序打开它们：

第一，第二，第三，第一。因此，当打开第一个和第二个下拉菜单时，第一个默认关闭（好），然后打开第三个下拉菜单 - 第二个关闭（好），在打开第三个并尝试打开第一个之后，第一个打开但第三个下拉菜单仍然存在打开。

我尝试使用 .dropdown class 从未关闭下拉列表中删除 open class 名称，但在第 3 次后 jQuery 停止响应并且没有'调用我的简单代码，例如

    $(".solution-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here1')

        $(".dropdown.open").removeClass("open");
    });
    
    $(".resources-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here2')
        $(".dropdown.open").removeClass("open");
    });
    
    $(".company-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here3')
        $(".dropdown.open").removeClass("open");
    });

这是我的 HTML 带有多个下拉菜单的导航栏代码：

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

<div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown solution-dropdown">
        <a href="/" class="nav-link dropdown-toggle solution-dropdown-toggle" data-target=".solution-dropdown" data-toggle="dropdown">Solutions
            <span class="solution-icon icon icon-chevron-up"></span>
            <span class="solution-icon icon icon-chevron-down"></span>
        </a>
        <div class="dropdown-menu solution-dropdown-menu">
            <a class="dropdown-item" href="#one">One</a>
            <a class="dropdown-item" href="#two">Two</a>
            <a class="dropdown-item" href="#three">Three</a>
            <a class="dropdown-item" href="#none">None</a>
        </div>
        </li>
        <li class="nav-item dropdown resources-dropdown">
        <a href="/" class="nav-link dropdown-toggle resources-dropdown-toggle" data-target=".resources-dropdown" data-toggle="dropdown">Resources
            <span class="resources-icon icon icon-chevron-up"></span>
            <span class="resources-icon icon icon-chevron-down"></span>
        </a>
        <div class="dropdown-menu resources-dropdown-menu">
            <a class="dropdown-item" href="#blue">Blue</a>
            <a class="dropdown-item" href="#green">Green</a>
            <a class="dropdown-item" href="#white" target="_blank">White</a>
            <a class="dropdown-item" href="#black">Black</a>
        </div>
        </li>
        <li class="nav-item dropdown company-dropdown">
        <a href="/" class="nav-link dropdown-toggle company-dropdown-toggle" data-target=".company-dropdown" data-toggle="dropdown">Company 
            <span class="company-icon icon icon-chevron-up"></span>
            <span class="company-icon icon icon-chevron-down"></span>
        </a>
        <div class="dropdown-menu company-dropdown-menu">
            <a class="dropdown-item" href="#FFF">FFF</a>
            <a class="dropdown-item" href="#DDD">DDD</a>
            <a class="dropdown-item" href="#GGG">GGG</a>
        </div>
        </li>
    </ul>
</div>

在我的 HTML 布局中，我有 bootstrap 和 jquery 导入，如下所示：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我哪里做错了？
为什么 jquery 在第 3 次单击下拉菜单后没有响应？
是否有任何解决方案可以使所有 3 个下拉菜单按预期打开和关闭，并且该解决方案将在 bootstrap3.3.7 中？

Answer 1

所以我找不到任何其他选项为什么默认情况下它不起作用，但我在我的 jquery 代码中发现了应该从下拉列表中删除 open class 的错误，所以从这个：

    $(".solution-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here1')

        $(".dropdown.open").removeClass("open");
    });
    
    $(".resources-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here2')
        $(".dropdown.open").removeClass("open");
    });
    
    $(".company-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here3')
        $(".dropdown.open").removeClass("open");
    });

我改成了

    $(".nav-link").click(function(event) {
        event.preventDefault()
        $(".dropdown.open").removeClass("open");
    });

问题解决了。

Bootstrap 3.3.7，第一次点击同一个导航栏下拉项后，导航栏下拉菜单没有关闭

Bootstrap 3.3.7, navbar dropdown doesn't closes after 1st time clicking 2nd time on the same navbar dropdown item

jquery

twitter-bootstrap-3