Вопрос:
У меня есть меню гамбургера, которое открывается нормально. Я хочу, чтобы он закрылся, когда я снова нажму на значок меню гамбургера (это не работает, и я борюсь). (он закрывается, только если я нажимаю на ссылку или нажимаю за пределами меню).
<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>
Один из способов сделать это – изменить data-toogle = “dropdown” на data-toogle = “collapse”, но, щелкая за пределами меню или ссылки, меню не закрывается.
Я хочу закрыть меню в значке меню гамбургера, но когда я нажимаю, ничего не происходит.
Лучший ответ:
Если вы используете Bootstrap, по умолчанию у вас должна быть возможность закрытия в кнопке меню Hamburger.
Содержание
Как вы справляетесь с этим утверждением?
“закрывается, только если я нажимаю на ссылку или нажимаю за пределами меню”
Настройка 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>
пример
$(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-f-t»> <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>Ответ №1
Чтобы достичь ожидаемого результата, измените 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>
