web-dev-qa-db-fra.com

Composant de réduction d'amorçage ne fermant pas le menu en cliquant loin

Lorsque je clique dessus, le menu ne se cache pas, j'ai trouvé ce code à l'adresse suivante: http://getbootstrap.com/components/#navbar Mais ne fonctionne pas tel quel. devrait.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="index.php">
        <img class="desktop-logo" src="img/logo.png" alt="Company title">
        <img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class=""><a href="index.php">List</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Oui, j'ai les bibliothèques appropriées installées: Bootstrap v3.0.3. Il n'y a pas d'erreur javascript, et le code HTML est valide.

Étapes à suivre pour reproduire: Téléchargez le paquetage bootstrap 3.0.3 Zip, créez un fichier index.html, insérez les éléments css et js pour bootstrap. Entrez le code ci-dessus et il ne ferme pas lorsque vous cliquez ou touché loin.

Le code est-il censé masquer le menu ou non?

javascripthtmlcsstwitter-bootstrapmobile
12
Damjan Dimitrioski

Cela devrait faire

<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script>

C'est la référence Gist

https://Gist.github.com/winnyboy5/8750551

16
winnyboy5

J'ai eu le même problème et la solution a été de s'assurer que bootstrap.js ne soit pas référencé plus d'une fois. Je l'ai eu chargé deux fois dans ma page et cela a rendu le problème décrit. 

    <script src="/js/bootstrap.min.js"></script>

Ne le chargez pas plus d'une fois! 

30
vt100

Ce qui précède affichait un comportement étrange pour moi, une barre de défilement apparaissant parfois sur le navigateur. Cela pourrait provenir de certains css fantaisistes, mais les réponses ci-dessous le corrigent pour moi.

$(document).on('click',function(e){
  if($('#bs-example-navbar-collapse-1').hasClass('in')){
    $('.collapse').collapse('hide'); 
  }
})
1
CleoR

Il existe une autre solution ici , qui fonctionne également avec les sous-menus.

<script>
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});
</script>
1
Stanislav

J'ai eu le même problème. N'utilisez pas le script "bidouille". Essayez simplement d’utiliser jquery 2.1.4 ou plus ancien.

0
glazsasha
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

^ J'ai eu le fichier .js trop loin. Changez vos lignes pour ressembler à ce qui précède et le bouton réactif devrait également fermer le menu.

0
Oliver Edwards