Bootstrap 导航栏，新的下拉菜单不会关闭移动视图中已打开的下拉菜单答案

【问题标题】：Bootstrap navbar, new dropdown does not close already opened dropdowns in mobile viewBootstrap 导航栏，新的下拉菜单不会关闭移动视图中已打开的下拉菜单
【发布时间】：2021-08-07 17:57:57
【问题描述】：

我在移动视图中遇到导航栏问题。在一个（或多个）下拉菜单已打开的情况下单击新下拉菜单时，它会添加到旧下拉菜单的顶部，而不是关闭任何已打开的下拉菜单。

我想要的是，当另一个下拉菜单已经打开时，当另一个下拉菜单被点击时，它会关闭所有以前的下拉菜单并只打开新的下拉菜单。

问题的图像。这里我点击了两个导航栏，新点击的一个（Sofiety 会员）只是简单地添加到旧下拉列表（Your Feeds）之上：

注意：再次单击任何下拉菜单会关闭该特定下拉菜单。

在常规视图（桌面视图）中，单击新的下拉菜单会关闭所有旧的下拉菜单，就像我想要的那样。

在 Phalcon 3.5 上内置 Volt。

jQuery：https://code.jquery.com/jquery-3.6.0.min.js

引导程序：https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js

Html：（抱歉，html 太长了！：x）

<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top" role="navigation" style="padding-top: 0px;">

    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle mobile-btn-background" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse-1">
                <div class="auth-buttons">
                    {% if auth_user is not empty %}
                    {{image(auth_user.profilepicture(), 'class':'user-image-navbar', 'style':'width: 35px; height: 35px; border-radius: 55%;') }}
                    {% else %}
                    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></div>
                    {% endif %}
            </button>

            {% if auth_user is empty %}
              {{ link_to("session/index", "<span class='auth-buttons white-text'><strong>Sign Up / In</strong></span>", "class":"navbar-toggle mobile-btn-background") }}
              {{ link_to("about/index", "<span class='auth-buttons white-text'><strong>Learn More!</strong></span>", "class":"navbar-toggle mobile-btn-background") }}
            {% else %}

<div class="button-group">

<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-4">

<span id="notifications_mobile" class="glyphicon glyphicon-globe" aria-hidden="true" font-size: "15px;"></span> <span class="badge" id="note_counter_mobile" font-size: 11px; margin-top: -8px;"></span>
</button>

{{ link_to("authed/conversation/index", "
<button class='navbar-toggle mobile-btn-background' type='button''>
  <span id='envelope_mobile' class='glyphicon glyphicon-envelope' aria-hidden='true' style='font-size: 15px;'></span> <span id='conv_counter_mobile' class='badge' style='font-size: 11px; margin-top: -8px;'></span></button>
  ") }}

<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-5">
  <span class='glyphicon glyphicon-user' aria-hidden='true' style='color: lightgreen;'></span>
</button>

{# EVENTS #}
<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
  <span class='glyphicon glyphicon-map-marker' aria-hidden='true' style='color: lightgreen;'></span>
</button>

{# YOUR FEEDS #}
<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
  <span class='glyphicon glyphicon-home' aria-hidden='true' style='color: lightgreen;'></span>
</button>

  </div>


            {% endif %}

            {% if auth_user is empty %}
                {% set link = "session/index" %}
            {% else %}
                {% set link = "authed/profile/main" %}
            {% endif %}
            {{ link_to(link, image('images/logo/logo.png', 'class': 'navbar-logo')) }}
        </div>

        <nav class="collapse navbar-collapse bs-navbar-collapse-1" role="navigation">
            {{ elements.getMenu(auth_user) }}
        </nav>




          <span class="visible-xs">

            
          <nav class="collapse navbar-collapse bs-navbar-collapse-2" id="bs-navbar-collapse-2">
              <div class="nav-collapse">
                  <ul class="nav navbar-nav navbar-left" style="padding-left: 8px;">
                    <li class='white-text'><strong><center>Your Feeds</center></strong></li>
                    {{ link_to("authed/statuses/feed", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-home' style='color: lightgreen;' aria-hidden='true'></span> Home Feed
                    </li>
                    ") }}
                    {% if auth_user.profile.city is not empty %}
                      {% set localfeed = auth_user.profile.city ~ " Feed" %}
                    {% else %}
                      {% set localfeed = "LocalCity feed" %}
                    {% endif %}

                    {{ link_to("authed/statuses/localfeed", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-tree-deciduous' style='color: lightgreen;' aria-hidden='true'></span> " ~ localfeed ~ "
                    </li>
                    ") }}
  
                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

          <nav class="collapse navbar-collapse bs-navbar-collapse-3" id="bs-navbar-collapse-3">
              <div class="nav-collapse">
                  <ul class="nav navbar-nav navbar-left" style="padding-left: 8px;">
                    <li class='white-text'><center><strong>Chillouts </strong></center></li>
                  {#<strong>Chillout</strong>#}
                    {{ link_to("authed/chillout/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-map-marker' style='color: lightgreen;' aria-hidden='true'></span> <strong>Overview</strong>
                    </li>
                    ") }}

                    {{ link_to("authed/chillout/find", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon glyphicon-share' style='color: lightgreen;' aria-hidden='true'></span> <strong>Find</strong>
                    </li>
                    ") }}

                    {{ link_to("authed/chillout/new", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-check' style='color: lightgreen;' aria-hidden='true'></span> <strong>Create</strong>
                    </li>
                    ") }}

                    <br>

                    {{ link_to("authed/chillout/past", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-edit' style='color: lightgreen;' aria-hidden='true'></span> Chillouts as Host
                    </li>
                    ") }}

                    {{ link_to("authed/chillout/past", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-ok-circle' style='color: lightgreen;' aria-hidden='true'></span> Past Chillouts
                    </li>
                    ") }}


                    <li class="divider"><hr></li>
                    <li class='white-text'><center><strong>Sociefy</strong></center></li>
                    {{ link_to("authed/sociefy/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-heart' style='color: lightgreen;' aria-hidden='true'></span> Match and recommendations
                    </li>
                    ") }}     

                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

          <nav class="collapse navbar-collapse bs-navbar-collapse-4" id="bs-navbar-collapse-4">
              <div class="nav-collapse">
                  <ul id="notifications_content_mobile" class="nav navbar-nav navbar-left">

                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

          <nav class="collapse navbar-collapse bs-navbar-collapse-5" id="bs-navbar-collapse-5">
              <div class="nav-collapse">
                  <ul class="nav navbar-nav navbar-left" style="padding-left: 8px;">
                    <li class='white-text'><strong><center>Sofiety Members</center></strong></li>

                    {{ link_to("authed/invite/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon glyphicon-heart' style='color: lightgreen;' aria-hidden='true'></span> Invite somone to Sofiety
                    </li>
                    ") }}

                    {{ link_to("authed/search/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-user' style='color: lightgreen;' aria-hidden='true'></span> Search Members
                    </li>
                    ") }}

                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

        </span>



  </div>
</nav>

非常感谢任何帮助，我已经尝试解决这个问题好几天了，但我不知道如何解决。

谢谢！！！

最好的问候， J

【问题讨论】：

标签： javascript jquery twitter-bootstrap navbar volt

【解决方案1】：

已修复，这是任何找到此问题的人的答案。注释部分是如果您不想要动画。

<script>
    $(document).on('click','.navbar-toggle',function(e) {
            // NO ANIMATION SOLUTION
            //$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
            //$(".navbar-toggle").stop().removeClass('collapsed');

            // ANIMATION SOLUTION
            $('.navbar-collapse').collapse('hide');
    });
</script>

【讨论】：