javascript - 修复 Bootstrap 下拉菜单的行为

Question

请查看菜单的 html 代码:

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

菜单有问题，不知道怎么解决。当视口(viewport)较小时，移动菜单(汉堡菜单)和用户图标一起显示在右上角。

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

提前感谢您的宝贵时间。

丹

Answer 1

我在这里为你制作了一个 fiddle 。请检查它是否按照您想要的方式工作。

(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>