我的引导网站中有 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>
最佳答案
我认为你的错误在于这部分:
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>
关于javascript - 如果单击其他导航，则删除类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29829826/