Lorsque je clique sur un élément de menu, le menu ne se ferme pas. J'ai déjà vérifié les importations de JS et CSS et apparemment tout va bien, y a-t-il autre chose que je dois faire pour exécuter le menu?

<!-- Fixed navbar -->
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <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="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

image

1
Paulo Roberto 8 août 2016 à 16:50

4 réponses

Meilleure réponse

Pour moi ça marche ...

$(document).ready(function(){
  $('.navbar-collapse a').on('click', function(){
            $('.navbar-toggle').click();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <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="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
2
Ivan Karaman 8 août 2016 à 14:21
Try It, I think, it usefull.    

<nav class="navbar navbar-static-top">
     <div>
        <div class="navbar-header" >

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_logistic" aria-expanded="false" aria-controls="navbar" id="button_menu_toggle">
            <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar line_orange"></span>
            <span class="icon-bar line_orange"></span>
           <span class="icon-bar line_orange"></span>
         </button>
        </div>

        <div id="navbar_logistic" class="navbar-collapse collapse">
        <ul class="nav navbar-nav flot_none">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Home2</a></li>
                 <li><a href="#">Home3</a></li>
                 <li><a href="#">Home4</a></li>


            </ul>
         </div>
        </div>
         </nav>       
1
Neeraj Prajapati 8 août 2016 à 14:05

Je ne suis pas certain, mais je pense que cela peut dépendre de jquery ui ... certaines fonctionnalités de bootstrap le sont. Je ne peux pas aider beaucoup plus avec la connaissance actuelle de la question ... J'ai aussi eu beaucoup de problèmes avec les importations .. vous pouvez essayer de vérifier sur votre console de débogage du navigateur pour être sûr que tout est en cours de chargement, aussi .. sur chrome: f12, onglet sources.

J'espère que cela a été utile.

1
Miguel Angelo Cacilhas 8 août 2016 à 13:59

Regarde ça

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<body>

<!-- Fixed navbar -->
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
  
</body>
1
link2pk 8 août 2016 à 14:11