在图标上关闭汉堡菜单，点击

Question

I have a hamburger menu, which is opening fine.我有一份汉堡菜单，开起来很好。 I want it to close when i click again on the hamburger menu icon (this is not working, and im struggling).当我再次单击汉堡菜单图标时，我希望它关闭（这不起作用，我很挣扎）。 (it closes only if i click a link or click outside the menu). （仅当我单击链接或在菜单外单击时才会关闭）。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top border-bottom border-grey"> <a class="navbar-brand" href="index.html"><img src="img/logomob.png"></a> <button class="navbar-toggler border-0" type="button" data-toggle="dropdown" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto text-center"> <li class="nav-item"> <a class="nav-link" href="#inicio">ÍNICIO</a> </li> <li class="nav-item"> <a class="nav-link" href="#servicos">SERVIÇOS</a> </li> </ul> </div> </nav>

A way to do it, is to change data-toogle="dropdown" to data-toogle="collapse", but that way, clicking outside the menu or a link, the menu does not close.一种方法是将 data-toogle="dropdown" 更改为 data-toogle="collapse"，但是这样，在菜单或链接外部单击时，菜单不会关闭。

I want to close the menu in the hamburger menu icon, but when i click, nothing happens.我想关闭汉堡菜单图标中的菜单，但是当我点击时，没有任何反应。

Answer 1

If you are using Bootstrap, by default you should have the close capability in Hamburger menu button.如果您使用 Bootstrap，默认情况下您应该在汉堡菜单按钮中具有关闭功能。

How are you handling this statement?你如何处理这个声明？

"it closes only if i click a link or click outside the menu" “仅当我单击链接或在菜单外单击时它才会关闭”

Setup Bootstrap Menu.设置引导菜单。

<nav class="navbar">

  <!-- Navbar brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Collapse button -->
  <button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
    aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
        class="fas fa-bars fa-1x"></i></span></button>

  <!-- Collapsible content -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent1">

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <!-- Links -->

  </div>
  <!-- Collapsible content -->

</nav>

Example例子

 $(document).on('click',function(){ $('.collapse').collapse('hide'); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="pos-ft"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Collapsed content</h5> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </div>

Answer 2

To achieve expected result, change data-toggle="dropdown" to data-toggle="collapse"为了达到预期的结果，将 data-toggle="dropdown" 更改为 data-toggle="collapse"

 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img src="img/logomob.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto text-center"> <li class="nav-item"> <a class="nav-link" href="#inicio" ">ÍNICIO</a> </li> <li class=" nav-item"> <a class="nav-link" href="#servicos">SERVIÇOS</a> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>

在图标上关闭汉堡菜单，点击

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-07-01 14:31:04

How are you handling this statement?你如何处理这个声明？

Setup Bootstrap Menu.设置引导菜单。

Example例子

解决方案2
0 2019-07-01 14:34:55

在图标上关闭汉堡菜单，点击

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-07-01 14:31:04

How are you handling this statement?你如何处理这个声明？

Setup Bootstrap Menu.设置引导菜单。

Example例子

解决方案2 0 2019-07-01 14:34:55

解决方案1
2 已采纳 2019-07-01 14:31:04

解决方案2
0 2019-07-01 14:34:55