删除类如果其他导航点击bootstrap

Question

我有2个移动导航栏在我的引导站点。我知道这不是最好的想法，但是这个公司的设计让我别无选择。当关闭时，我需要帮助让图形翻转回到下面的位置。我有一些脚本来关闭一个，如果其他导航切换点击，但图形不翻转。我知道这是更容易的一面，但我是引导和编写脚本的新手。这是我的代码：

 <div class="header"><div class="container"> 
      <div class="col-sm-4 logo hidden-xs"><a href="/"><img class="img-responsive" title="Logo" src="images/Logo.png" alt=""></a></div> 
       <div class="col-sm-4 login-wrapper hidden-xs"> 
        <ul class="list-inline header-list"> 
         <li>Login to sphere</li> 
          <li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span></a><ul class="list-unstyled dropdown-menu" role="menu"><li><a href="#">sphere</a></li> 
           <li><a href="#">Trucks</a></li> 
           <li><a href="#">Transport</a></li> 
          </ul> 
          </li> 
        </ul> 
        <div class="clearfix"></div> 
         <form class="login-form" role="login"> 
         <div class="form-group"> 
          <input type="text" class="user-input form-control" placeholder="Username"> 
          <input type="text" class="pass-input form-control" placeholder="Password"> 
          <button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button> 
         </div> 
         </form></div> 
        <div class="col-sm-4 search-wrapper hidden-xs"> 
         <form class="search-form" role="search"> 
         <div class="form-group"> 
          <input type="text" class="search-input form-control" placeholder="Search"> 
          <button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button></div></form> 
    </div> 
    </div> 
    <div class="row"> 
     <nav class="navbar navbar-default"> 
      <div class="container"><div class="navbar-header"><a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="Logo" src="images/Logo.png" alt=""></a> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1"><span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span> 
        </button> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"> 
         <span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span> 
    </button> 
    </div> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search"> 
       <div class="form-group"> 
       <input type="text" class="search-input form-control" placeholder="Search"> 
       <button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button> 
       </div> 
      </form> 
      <li class="active"><a href="#">ABOUT <span class="sr-only">(current)</span></a></li> 
      <li><a href="#">RESOURCES</a></li> 
      <li><a href="#">CONTACT</a></li> 
      <li class="dropdown"> 
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES</a> 
      <div class="dropdown-menu hover-dropdown hidden-xs hidden-sm"> 
      <div style="height:5px; background-color:#fff;"></div> 
       <ul class="list-inline hidden-xs"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </div>  
      </li> 
      <li><a href="#">PLACEHOLDER</a></li> 
      </ul> 

     </div><!-- /.navbar-collapse --> 
     <div class="collapse navbar-collapse" id="navbar-collapse-2"> 
      <ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin"> 
       <li> 
        <ul class="header-list list-unstyled"> 
        <li class="list-unstyled mobile">Login to sphere</li> 
         <li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector"> 
         <a href="#" class="mobileDropdown dropdown-toggle mobile" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span></a> 
         <ul class="mobileList list-unstyled dropdown-menu mobile" role="menu"> 
          <li><a href="#">sphere</a></li> 
          <li><a href="#">Trucks</a></li> 
          <li><a href="#">Transport</a></li> 
         </ul> 
         </li> 
        </ul> 
       </li> 
       <div class="clearfix"></div> 
       <form class="login-form" role="login"> 
        <div class="form-group"> 
        <input type="text" class="user-input form-control longin-control" placeholder="Username"> 
        <input type="text" class="pass-input form-control login-control" placeholder="Password"> 
        <button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button> 
        </div> 
       </form> 
      </ul> 
     </div> 
    </div><!-- /.container-fluid --> 


    </nav> 
    </div> 
    </div> 
    <script> 
      $('#navbar-collapse-1').on('shown.bs.collapse', function() { 
      $(".myMenu-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up"); 
     }); 

     $('#navbar-collapse-1').on('hidden.bs.collapse', function() { 
      $(".myMenu-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down"); 
     }); 

     $('#navbar-collapse-2').on('shown.bs.collapse', function() { 
      $(".myLogin-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up"); 
     }); 

     $('#navbar-collapse-2').on('hidden.bs.collapse', function() { 
      $(".myLogin-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down"); 
     }); 
       if($('#navbar-collapse-1').hasClass('shown.bs.collapse')){ 
        (".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
      }; 
</script> 

我试图做到这一点，但它没有奏效。我想知道我是否应该创建一个bootply？

<script> 
// FLIP ALL THE GLYPHICONS NAVBAR 

    $('#navbar-collapse-1').on('shown.bs.collapse', function() { 
     $(".myMenu-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up"); 
    }); 

    $('#navbar-collapse-1').on('hidden.bs.collapse', function() { 
     $(".myMenu-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down"); 
     $(this).addClass("dropdown-open"); 
    }); 


    $('#navbar-collapse-2').on('shown.bs.collapse', function() { 
     $(".myLogin-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up"); 
     $(this).addClass("dropdown-open"); 
    }); 

    $('#navbar-collapse-2').on('hidden.bs.collapse', function() { 
     $(".myLogin-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down"); 
    }); 

    if($('#navbar-collapse-1').hasClass('dropdown-open')){ 
    (".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
}; 
</script> 

Answer 1

迈克尔我想你知道你在这里的救命稻草。我可以在这里找到你的代码。我不知道我可以清理多少，并确保它不需要很长时间来加载。我对Bootstrap和JavaScript非常陌生，但我认为这有诀窍。我在代码中遇到的唯一问题是当点击另一个按钮时它会隐藏图形，即使点击了特定的按钮，图形也会隐藏起来。下面是我是如何做到这一点的，再次请让我知道是否有更简单的方法来写这种逻辑，因为我确信有这样的逻辑。感谢迈克尔巨大的帮助你！）

<script> 
    // FLIP ALL THE GLYPHICONS NAVBAR 

    $('#navbar-collapse-1').on('shown.bs.collapse', function() { 
     $(".myMenu-glyphicon").removeClass("glyphicon-menu-down"); 
     $(".myMenu-glyphicon").addClass("glyphicon-menu-up"); 
     $(this).addClass("dropdown-open").removeClass("dropdown-closed"); 
     if($('#navbar-collapse-2').hasClass('dropdown-open')){ 
      $(".myLogin-glyphicon").removeClass("glyphicon-menu-up"); 
      $(".myLogin-glyphicon").addClass("glyphicon-menu-down"); 
      $("#navbar-collapse-2").removeClass("dropdown-open"); 
      $("#navbar-collapse-2").addClass("dropdown-closed"); 
     }; 
    }); 

    $('#navbar-collapse-1').on('hidden.bs.collapse', function() { 
     $(".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
     $(".myMenu-glyphicon").addClass("glyphicon-menu-down"); 
     $(this).removeClass("dropdown-open").addClass("dropdown-closed"); 
    }); 


    $('#navbar-collapse-2').on('shown.bs.collapse', function() { 
     $(".myLogin-glyphicon").removeClass("glyphicon-menu-down"); 
     $(".myLogin-glyphicon").addClass("glyphicon-menu-up"); 
     $(this).addClass("dropdown-open").removeClass("dropdown-closed"); 
     if($('#navbar-collapse-1').hasClass('dropdown-open')){ 
      $(".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
      $(".myMenu-glyphicon").addClass("glyphicon-menu-down"); 
      $("#navbar-collapse-1").removeClass("dropdown-open"); 
      $("#navbar-collapse-1").addClass("dropdown-closed"); 
     }; 
    }); 

    $('#navbar-collapse-2').on('hidden.bs.collapse', function() { 
     $(".myLogin-glyphicon").removeClass("glyphicon-menu-up") 
     $(".myLogin-glyphicon").addClass("glyphicon-menu-down"); 
     $(this).removeClass("dropdown-open").addClass("dropdown-closed"); 
     if($('#navbar-collapse-1').hasClass('dropdown-open')){ 
      $(".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
      $(".myMenu-glyphicon").addClass("glyphicon-menu-down"); 
     }; 
    }); 

</script> 

Answer 2

我认为你的错误就在于此部分：

if($('#navbar-collapse-1').hasClass('shown.bs.collapse')){ 
    (".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
}; 

shown.bs.collapse是不是被应用到元素，而是一个事件类。

您正处于正确的轨道上。您可以修改第一个导航栏上的侦听器来更改第一个导航栏的类，以表示存在一个打开的导航栏，然后在第二个导航栏代码中检查第一个导航栏是否具有下拉公开类。

<script> 
// FLIP ALL THE GLYPHICONS NAVBAR 

    $('#navbar-collapse-1').on('shown.bs.collapse', function() { 
     $(".myMenu-glyphicon").removeClass("glyphicon-menu-down"); 
     $(".myMenu-glyphicon").addClass("glyphicon-menu-up"); 
     $(this).addClass("dropdown-open"); 
    }); 

    $('#navbar-collapse-1').on('hidden.bs.collapse', function() { 
     $(".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
     $(".myMenu-glyphicon").addClass("glyphicon-menu-down"); 
     $(this).removeClass("dropdown-open"); 
    }); 


    $('#navbar-collapse-2').on('shown.bs.collapse', function() { 
     $(".myLogin-glyphicon").removeClass("glyphicon-menu-down"); 
     $(".myLogin-glyphicon").addClass("glyphicon-menu-up"); 
     $(this).addClass("dropdown-open"); 
     if($('#navbar-collapse-2').hasClass('dropdown-open')){ 
      $(".myLogin-glyphicon").removeClass("glyphicon-menu-up"); 
     }; 
    }); 

    $('#navbar-collapse-2').on('hidden.bs.collapse', function() { 
     $(".myLogin-glyphicon").removeClass("glyphicon-menu-up") 
     $(".myLogin-glyphicon").addClass("glyphicon-menu-down"); 
     $(this).removeClass("dropdown-open"); 
     if($('#navbar-collapse-1').hasClass('dropdown-open')){ 
      $(".myMenu-glyphicon").removeClass("glyphicon-menu-up"); 
     }; 
    }); 

</script>