Ocultar o colapso de navegação do Twitter Bootstrap ao clicar

Esta não é uma lista suspensa de submenus, a categoria é classe li, como na figura:

Ao selecionar uma categoria no menu responsivo (o modelo é apenas uma página), desejo ocultar o colapso da navegação automaticamente ao clicar. Também passe para usar como navegação, pois o modelo tem apenas uma página. Eu procuro uma solução que não a afete, aqui está o código HTML do menu:

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

tente isto:

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

Eu apenas replico os 2 atributos do btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") em cada link como este:

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

Na barra de navegação do Bootstrap 4 , infoi alterado para, showportanto, a sintaxe seria:

data-toggle="collapse" data-target=".navbar-collapse.show"

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

Melhor usar os métodos padrão collapse.js ( documentos V3 , documentos V4 ):

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

Ainda mais elegante, sem uma lambida de código duplicado, é simplesmente aplicar os atributos data-toggle="collapse"e data-target=".nav-collapse"à própria navegação:

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Super limpo, sem a necessidade de JavaScript. Funciona muito bem, desde que seus nav aelementos tenham preenchimento suficiente para dedos gordos e você não impeça a ocorrência de eventos de clique e.stopPropagation()quando os usuários clicam nos nav aitens.

Atualize seu

<li>
  <a href="#about">About</a>
</li>

para

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

Essa simples mudança funcionou para mim.

Ref: https://github.com/twbs/bootstrap/issues/9013

A navegação deve ser fechada sempre que um usuário clicar em qualquer lugar do corpo - não apenas nos elementos de navegação. O menu Say está aberto, mas o usuário clica no corpo da página. O usuário espera ver o menu fechar.

Você também deve garantir que o botão de alternância esteja visível, caso contrário, um salto é visto no menu.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});

Testado no Bootstrap 3.3.6 - trabalho!

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});

Tente isso> Bootstrap 3

Brilhante exatamente o que eu estava procurando, no entanto, tive alguns confrontos com o javascript e o modal de bootstrap, isso foi corrigido.

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

Espero que isto ajude.

Isto funcionou bem para mim. É o mesmo que a resposta aceita, mas corrige o problema relacionado à visualização de desktop / tablet

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

Eu acho que é melhor usar os métodos collapse.js padrão do Bootstrap 3 usando o .navbar-collapseelemento como recolhível que você deseja ocultar, como mostrado abaixo.

Outras soluções podem causar outros problemas indesejados na maneira como os elementos são exibidos ou funcionam em sua página da web. Portanto, embora algumas soluções pareçam corrigir o seu problema inicial, elas podem muito bem apresentar outras, portanto, execute um teste completo do seu site após qualquer correção.

Para ver este código em ação:

1. Pressione "Executar este trecho de código" abaixo.
2. Pressione o botão "Página inteira".
3. Dimensionar a janela até que o menu suspenso seja ativado.
4. Em seguida, selecione uma opção de menu e pronto!

Felicidades!

$('.nav a').click(function() {
  $('.navbar-collapse').collapse('hide');  
});

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Franciscus Agnew">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Navbar Collapse Function</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
            <a class="navbar-brand" href="#">Brand Logo</a>
          </div><!-- navbar-header -->
    
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#staff">Staff</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul><!-- navbar-right -->
          </div><!-- navbar-collapse -->
          
        </div><!-- container -->
      </nav><!-- navbar-fixed-top -->
    </header>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <!-- Custom Navbar Collapse Script Solution -->
    <script>
      $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');  
      });
    </script>
  </body>
</html>

Em cada link suspenso, coloque data-toggle = "collapse" e data-target = ". Nav-collapse" em que nav-collapse é o nome que você atribui à lista suspensa.

<ul class="nav" >
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
      <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
      <li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
      <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
      <!-- dropdown -->
  </ul>

Isso está funcionando perfeitamente na tela que possui uma lista suspensa, como telas móveis, mas no desktop e tablet ele cria um flickr. Isso ocorre porque a classe .collapsing é aplicada. Para remover o flickr, criei uma consulta de mídia e inseri o estouro oculto na classe em colapso.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

Adicionar a tag data-toggle = "collapse" data-target = ". Navbar-collapse.in" à tag <a>funcionou para mim.

<div>

        <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a
                    href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
                </a></li>
            </ul>
    </div>

Aqui está como eu fiz isso. Se houver uma maneira mais suave, por favor me diga.

Dentro das <a>tags onde estão os links para o menu, adicionei este código:

onclick="$('.navbar-toggle').click()"

Ele preserva a animação do slide. Portanto, em pleno uso, ficaria assim:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.html">My Cool Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

// NOTA Adicionei o "touchstart" para toque no celular. touchstart / end não tem atraso

Esta é a melhor solução que eu usei.

$(document).ready(function () {

        $('.nav a').on('click', function () {

            if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
            if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
        });

    });

Para aqueles que notaram as barras de navegação da área de trabalho piscam ao usar esta solução:

$('.nav a').on('click', function(){
    $(".navbar-collapse").collapse('hide');
}); 

Uma solução simples para esse problema é referenciar a barra de navegação recolhida apenas verificando a presença de 'in':

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

Isso reduz a barra de navegação ao clicar quando a barra de navegação está no modo móvel, mas deixa a versão para desktop em paz. Isso evita o tremor que muitas pessoas testemunharam nas versões para desktop.

Além disso, se você tiver uma barra de navegação com menus suspensos , não poderá vê-los, pois a barra de navegação ficará oculta assim que você clicar neles; portanto, se você tiver menus suspensos (como eu!), Use o seguinte:

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Isso procura a presença da classe suspensa acima do link clicado no DOM; se existir, o link pretendia iniciar um menu suspenso e, consequentemente, o menu não fica oculto. Quando você clica em um link no menu suspenso, a barra de navegação é ocultada corretamente.

$("body,.nav a").click(function (event) {

    // only do this if navigation is visible, otherwise you see jump in
    //navigation while collapse() iS called 
    if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
    $('.navbar-collapse').collapse('toggle');
  }
});

100% de trabalho: -

Adicionar em HTML

<div id="myMenu" class="nav-collapse">

Javascript

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

Isso oculta o colapso da navegação em vez de animar, mas o mesmo conceito da resposta acima

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

Prefiro isso em sites de página única porque uso o localScroll.js que já anima.

Visualização móvel: como ocultar a navegação de alternância no bootstrap + menu suspenso + jquery + scrollto com itens de navegação que apontam para âncoras / IDs na mesma página , modelo de uma página

O problema que eu estava experimentando com qualquer uma das soluções acima é que elas estão recolhendo apenas os itens do submenu, enquanto o menu de navegação não é recolhido.

Então eu fiz o meu pensamento .. e o que podemos observar? Bem, toda vez que nós / usuários clicamos em um link de rolagem para rolagem, queremos que a página role para essa posição e, simultaneamente, reduza o menu para restaurar a exibição da página.

Bem ... por que não atribuir esse trabalho às funções scrollto? Fácil :-)

Então nos dois códigos

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

e

// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
}

Acabei de adicionar o mesmo comando nas duas funções

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

(parabéns a um dos colaboradores acima)

assim (o mesmo deve ser adicionado aos dois pergaminhos)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

se você quiser vê-lo em ação, basta dar uma olhada nos dados de recuperação do NAS

Os usuários do Bootstrap3 tentam o código abaixo. Funcionou para mim.

function close_toggle() {
   if ($(window).width() <= 768) {
      $('.nav a').on('click', function(){
          $(".navbar-toggle").click();
      });
   }
   else {
     $('.nav a').off('click');
   }
}
close_toggle();

$(window).resize(close_toggle);

O Bootstrap define uma .inclasse no elemento Collapse para acionar a animação - para abri-la. Se você simplesmente remover a .inclasse, a animação não será executada, mas ocultará o elemento - não exatamente o que você deseja.

Provavelmente, é mais rápido executar uma ifinstrução para verificar se a classe de auto-inicialização padrão .infoi configurada no elemento

Portanto, este código diz apenas:

se meu elemento tiver a classe .inaplicada, feche-a acionando a animação Bootstrap padrão. Caso contrário, execute a ação / animação padrão do Bootstrap para abri-lo

$('#navbar a').on('click touchstart', function() {
    // if .in class is set on element, the element is visible – you want to hide it
    if ($('#navbar').hasClass('in')) {
        // collapse toggle will remove the .in class and animate the element closed 
        $('#navbar').collapse('toggle');
    }
})

Adicione um ID a cada

<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
    <ul class="nav">
      <li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
    </ul>
</div>

Outra solução rápida para o Bootstrap 3. * pode ser:

$( document ).ready(function() {
    //
    // Hide collapsed menu on click
    //
    $('.nav a').each(function (idx, obj) {
        var selected = $(obj);

        selected.on('click', function() {
            if (selected.closest('.collapse.in').length > 0) {
                $('.navbar-toggle').click(); //bootstrap 3.x by Richard
            }
        });
    });
});

Publiquei uma solução que funciona com Aurelia aqui: https://stackoverflow.com/a/41465905/6466378

O problema é que você não pode apenas adicionar data-toggle="collapse"e adicionar data-target="#navbar"aos seus elementos. E o jQuery não funciona em um ambiente Aurelia ou Angular.

A melhor solução para mim foi criar um atributo personalizado que escute a consulta de mídia correspondente e adicione o data-toggle="collapse"atributo, se desejado:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

O atributo personalizado com Aurelia se parece com isso:

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}

Estou no Bootstrap 4, usando o fullPage.js com uma navegação superior fixa e tentei tudo listado aqui, com resultados mistos.

• Tentei da melhor maneira:

  data-toggle="collapse" data-target=".navbar-collapse.show"

  O menu entraria em colapso, mas os links href não levariam a lugar algum.

• Tentei de outras maneiras lógicas:

  $('myClickableElements').on('click touchstart', function(){
    $(".navbar-collapse.show").collapse('hide');
    // or
    $(".navbar-collapse.show").collapse('toggle');
    // or
    $('.navbar-toggler').click()
  });

  Haveria algum comportamento estranho por causa do evento touchstart: os botões clicados não seriam os que eu realmente clicara, quebrando os links. Além disso, ele adicionaria a classe .show a outros menus suspensos não relacionados na minha navegação, causando coisas mais estranhas.

• Tentou alterar div para li
• Tentou e.preventDefault () e e.stopPropagation ()
• Tentei e tentei mais

Nada daria certo.

Então, em vez disso, tive a (maravilhosa) idéia de fazer isso:

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

Eu já tinha coisas nessa função de troca de hash, e só precisava adicionar essa linha.

Na verdade, ele faz exatamente o que eu quero: recolher o menu quando o hash mudar (ou seja, um clique levando a outro lugar). O que é bom, porque agora posso ter links no meu menu que não serão recolhidos.

Quem sabe, talvez isso ajude alguém na minha situação!

E obrigado a todos que participaram desse tópico, muitas informações a serem aprendidas aqui.

Na maioria dos casos, você desejará chamar a função de alternância apenas se o botão de alternância estiver visível ...

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

O check-in do menu é aberto marcando a classe 'in' e, em seguida, execute o código.

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

funciona perfeitamente.