引导导航栏，新的下拉列表不会关闭移动视图中已经打开的下拉列表

提问者：小点点

引导导航栏，新的下拉列表不会关闭移动视图中已经打开的下拉列表

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

我想要的是，每当点击一个下拉列表，而另一个下拉列表已经打开，它将关闭任何以前的下拉列表，只打开新的下拉列表。

问题的图像。在这里，我点击了两个导航栏，新点击的一个（索菲蒂会员）只是在旧下拉列表（您的订阅源）的顶部添加：

注意：再次单击任何下拉列表将关闭该特定下拉列表。

在常规视图（桌面视图）中，单击一个新的下拉列表将关闭所有旧的下拉列表，正如我所希望的那样。

Phalcon 3.5内置伏特。

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>