Bootstrap close menu responsivo “no clique”

Em "PRODUTOS", clique em deslizar para cima um div branco (como mostrado no anexo). Quando estiver no responsivo (celular e tablet), gostaria de fechar automaticamente a barra de navegação responsiva e mostrar apenas a barra branca.

Eu tentei:

$('.btn-navbar').click();  

também tentei:

$('.nav-collapse').toggle();

E funciona. No entanto, no tamanho do desktop, ele também é chamado e faz algo estranho no menu, diminuindo por um segundo.

Alguma ideia?

Tenho que trabalhar com animação!

Menu em html:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Evento de clique de vinculação em todos os elementos na navegação para recolher o menu (plugin de recolhimento do Bootstrap):

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

EDITAR Para torná-lo mais genérico, podemos usar o seguinte trecho de código

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Você não precisa adicionar nenhum javascript extra ao que já está incluído com a opção de recolhimento de bootstraps. Em vez disso, simplesmente inclua os seletores de alternância de dados e de destino de dados em seus itens de lista de menu, assim como você faz com o botão de alternância da barra de navegação. Portanto, para o item do menu Produtos, seria assim

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Em seguida, você precisaria repetir os seletores de alternância de dados e alvo de dados para cada item do menu

EDITAR!!! A fim de corrigir problemas de estouro e oscilação nesta correção, estou adicionando mais alguns códigos que irão consertar isso e ainda não tem nenhum javascript extra. Aqui está o novo código:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Aqui está ele no trabalho http://jsfiddle.net/jaketaylor/84mqazgq/

Isso tornará seus seletores de alternância e alvo específicos para o tamanho da tela e eliminará falhas no menu maior. Se alguém ainda estiver tendo problemas com falhas, entre em contato e eu encontrarei uma solução. obrigado

EDIT : No bootstrap v4.1.3 não consegui usar classes visíveis / ocultas. Em vez de hidden-xsusar d-none d-sm-blocke em vez de visible-xsusar d-block d-sm-none.

Acho que você é especialista em engenharia ..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

EDITAR: para cuidar dos submenus, certifique-se de que sua âncora de alternância tenha a classe de alternância suspensa nela.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

EDIT 2: Adicionar suporte para toque de telefone.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

Eu realmente gostei da ideia de Jake Taylor de fazer isso sem JavaScript adicional e tirar vantagem do seletor de colapso do Bootstrap. Descobri que você pode corrigir o problema de "oscilação" presente quando o menu não está no modo recolhido, modificando data-targetligeiramente o seletor para incluir a inclasse. Então fica assim:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

Eu não testei com menus suspensos / aninhados, então YMMV.

só para ficar completo, no Bootstrap 4.0.0-beta usando .show funcionou para mim ...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

Estou assumindo que você tem uma linha como esta definindo a área de navegação, com base em exemplos de Bootstrap e todos

<div class="nav-collapse collapse" >

Basta adicionar as propriedades como tal, como no botão MENU

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

Eu também adicionei <body>, funcionou. Não posso dizer que criei um perfil ou algo assim, mas parece um prazer para mim ... até que você clique em um ponto aleatório da IU para abrir o menu, então não é tão bom assim.

DK

Isso funciona, mas não anima.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

No HTML eu adicionei uma classe de nav-link à uma tag de cada link de navegação.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

esta solução tem um bom trabalho, tanto no desktop quanto no celular.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

Apenas para explicar a solução do user1040259, adicione este código ao seu $ (document) .ready (function () {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

Como eles mencionaram, isso não anima o movimento ... mas fecha a barra de navegação na seleção do item

Para aqueles que usam AngularJS e Angular UI Router com isso, aqui está minha solução (usando a chave de alternância de mollwe). Onde ".navbar-main-collapse" é o meu "alvo de dados".

Criar diretiva:

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

Diretriz de uso:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

Isso deve funcionar.

Requer bootstrap.js.

Exemplo => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

Isso faz a mesma coisa que adicionar os atributos 'data-toggle = "collapse"' e 'href = "yournavigationID"' às tags dos menus de navegação.

Estou usando a função mollwe, embora tenha adicionado 2 melhorias:

a) Evite o fechamento da lista suspensa se o link clicado estiver recolhido (incluindo outros links)

b) Oculte a lista suspensa também, se você estiver clicando no conteúdo da web visível.

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

Não é o tópico mais recente, mas procurei uma solução para o mesmo problema e encontrei uma (uma mistura de alguns outros).

Eu dei o NavButton:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

um id / identificador como:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Não é a melhor "ideia" - mas: Funciona para mim! Agora você pode verificar a visibilidade do seu botão (com jquery) como:

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(NOTA: Este é apenas um código cortado! Usei um evento "onclick" em meus links de navegação! (Iniciando um Reguest AJAX.)

O resultado é: Se o botão está "visível", ele foi "clicado" ... Então: Não há Bug se você usar a "Visualização em tela cheia" do Bootstrap (largura de mais de 940px).

Saudações Ralph

PS: Funciona bem com IE9, IE10 e Firefox 25. Não verifiquei outros - mas não consigo ver um problema :-)

Isso funcionou para mim. Eu fiz assim, quando clico no botão de menu, estou adicionando ou removendo a classe 'in', porque ao adicionar ou remover essa classe o alternador está funcionando por padrão. 'e.stopPropagation ()' é para parar a animação padrão por bootstrap (eu acho) você também pode usar o 'toggleClass' no lugar de adicionar ou remover classe.

$ ('# ChangeToggle'). On ('click', function (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

Você pode usar

ul.nav {
    display: none;
}

Por padrão, isso fechará a barra de navegação. Por favor, deixe-me saber se alguém achar isso útil

Se, por exemplo, seu ícone alternável estiver visível apenas para dispositivos muito pequenos, você pode fazer algo assim:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Clicar em [data-toggle = "offcanvas"] adicionará .hidden-xs do bootstrap ao meu # menu lateral, o que ocultará o conteúdo do menu lateral, mas ficará visível novamente se você aumentar o tamanho da janela.

se o menu HTML for

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

on nav alternar 'na' classe é adicionado e removido do alternador. verifique se o menu responsivo está aberto e, em seguida, alterne para fechar.

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Tuggle Nav Close, resposta compatível com o navegador IE, sem nenhum erro de console. Se você estiver usando bootstrap, use este

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

$('.navbar-toggle').trigger('click');

Solução Bootstrap 4 sem qualquer Javascript

Adicione atributos data-toggle="collapse" data-target="#navbarSupportedContent.show" ao div<div class="collapse navbar-collapse">

Certifique-se de fornecer o correto idemdata-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show é evitar que o menu pisque em grandes resoluções

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <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>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>