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

Posted 2023-05-08

【中文标题】Bootstrap 导航栏，新的下拉菜单不会关闭移动视图中已打开的下拉菜单

【英文标题】：Bootstrap navbar, new dropdown does not close already opened dropdowns in mobile view

【发布时间】：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

【参考方案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>