修复引导下拉菜单的行为

Question

请参阅菜单的html代码：

https://www.findtaxpro.com/content/img/menufix-ehsan-1.html

菜单有问题，我不知道如何解决。 当视口较小时，移动菜单(汉堡菜单(和用户图标会根据需要显示在右上角。

但是，当单击移动/汉堡菜单后紧跟用户图标图像时，移动菜单不会关闭，而是保持打开状态。 这会导致糟糕的用户体验。 有没有办法在移动菜单后立即单击用户图标图像时关闭移动/汉堡菜单？

提前感谢您的时间。

担

Answer 1

在这里，我为你做了一个小提琴。请检查它是否按您想要的方式工作。

(function($) {
$(".navbar-brand.user-img").on("click", function() {
if ($("#defaultNavbar1").attr("aria-expanded") === "true") { // if hamburger menu already expanded
$("button.navbar-toggle").click(); // click hamburger to collapse back
}
});
})(jQuery);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.findtaxpro.com/content/css/custom.css" rel="stylesheet">
<nav class="navbar navbar-default MainMenuBar">
<a href="#" class="navbar-brand user-img" data-toggle="dropdown"> <img src="https://www.findtaxpro.com/Content/img/User.png" class="user-img" /></a>
<ul class="dropdown-menu pull-right" role="menu">
<li><a id="registerLink" href="https://www.findtaxpro.com/Account/Register"><span class="MenuItems">Register</span></a> </li>
<li><a href="https://www.findtaxpro.com/Account/Login"><span class="MenuItems">Login</span></a> </li>
</ul>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="https://www.findtaxpro.com"><img class="navbar-brand user-img1" src="https://www.findtaxpro.com/Content/img/logo.png" /></a>
<a class="navbar-brand" href="https://www.findtaxpro.com/Marketing/index"><img class="navbar-brand user-img4" src="https://www.findtaxpro.com/Content/img/ClickHereArtboard 1-8.png" /></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav pull-right">
<li><a href="https://www.findtaxpro.com/Search"><span class="MenuItems">Search</span></a></li>
<li><a href="https://www.findtaxpro.com/Reviews"><span class="MenuItems">Review</span></a></li>
<li><a href="https://www.findtaxpro.com/Search/Promo"><span class="MenuItems">Offers</span></a></li>
<li><a href="https://www.findtaxpro.com/Search/Rewards"><span class="MenuItems">Rewards</span></a></li>
<li><a href="https://www.findtaxpro.com/Marketing/MileTrack"><span class="MenuItems">MileTrack</span></a></li>
<li><a href="https://www.findtaxpro.com/Marketing/ReceiptsandDocs"><span class="MenuItems">Docs</span></a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>