修复引导下拉菜单的行为答案

【问题标题】：Fix bootstrap dropdown menu's behavior修复引导下拉菜单的行为
【发布时间】：2017-08-17 03:59:50
【问题描述】：

请在以下位置查看菜单的 html 代码：

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

菜单有问题，我不知道如何解决。当视口较小时，移动菜单（汉堡菜单）与用户图标一起显示在右上角。

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

提前感谢您的宝贵时间。

丹

【问题讨论】：

这不是一段很好的代码，但它可能会以一种快速而肮脏的方式解决您的问题：$(".navbar-brand.user-img").click(function(){ if($("#defaultNavbar1").attr("aria-expanded") == "true") { $("button.navbar-toggle").click(); } });
这里对功能的期望是什么？您可以在您的 CSS 集 nav.open .navbar-collapse.in { display: none } 中设置，但这不会为导航打开和关闭设置动画。
作为一项规则，您应该在“问题”中发布您问题的所有相关代码。如果您移动或修改该页面，问题将变得毫无用处。

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

谢谢，Ihpar。当下拉菜单按需要工作时，用户图标已从右向左移动。我需要用户图标保持在右侧。
没问题。但是我没有对 html 或 css 做任何事情，所以它应该留在原来的位置。您只需将 javascript 代码复制粘贴到源文件即可。
是的，这解决了它。非常感谢。欣赏它。丹
很高兴它有帮助。