twitter déroulant ne fonctionne pas

voici le code que j'utilise mais la liste déroulante n'est pas affichée. Ma référence javascript est dans la bonne séquence. et j'ai également ajouté une fonction pour basculer vers le bas.twitter déroulant ne fonctionne pas

<!-- Set the viewport so this responsive site displays correctly on mobile devices --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <!-- Include bootstrap CSS --> 
    <script src="includes/jquery/jquery-2.1.0.min.js"></script> 
<script src="includes/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
</script> 
    <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="includes/style.css" rel="stylesheet"> 


    </head> 
    <body> 
      <div class= "navbar navbar-inverse navbar-static-top"> 
      <div class= "container"> 
       <a href="#" class="navbar-brand"> tech site</a> 
       <button= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
       </button> 
       <div class= "collapse navbar-collapse navHeaderCollapse"> 
       <ul class= "nav navbar-nav navbar-right"> 
         <li><a href= "#" class="active"> Home</a> </li> 
         <li><a href= "#"> Login</a> </li> 
         <li class="dropdown"> 
          <a href= "#" class="dropdown-toggle" data-toggle="dropdown"> Social Media<b class="caret"></b></a>       
          <ul class="dropdown-menu"> 
         <li><a href= "#" class="active">Facebook</a> </li> 
         <li><a href= "#">Twitter</a> </li> 
         <li><a href= "#"> Google+</a> </li> 

          </ul> 
         </li> 
         <li><a href= "#"> About</a> </li> 
         <li><a href= "#"> Contact</a> </li> 
       </ul> 
       </div> 
      </div> 

    </body> 

<div> 

<div class="bottom"> 
     <div class="container"> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> 
       <p>Content for the first footer section.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> 
       <p>Content for the second footer section.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> 
       <p>Content for the third footer section.</p> 
      </div> 
     </div> 
    </div> 
<!-- Include jQuery and bootstrap JS plugins --> 

</body> 
</html> 
</html>

Source

2014-09-20 himani agarwal

Votre balisage présente des problèmes. Vous fermez des éléments tels que deux fois. – ChaoticNadirs

Vous devez insérer le plugin collapse et utiliser les versions wright de jquery et bootstrap. Vous n'avez pas besoin d'insérer votre propre script pour le faire fonctionner. Voici votre code avec les modifications minimales, juste pour cela fonctionne:

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Navbar Collapse</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </head> 
<body> 
    <div class= "navbar navbar-inverse navbar-static-top"> 
      <div class= "container"> 
       <a href="#" class="navbar-brand"> tech site</a> 
       <button class= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
       </button> 
       <div class= "collapse navbar-collapse navHeaderCollapse"> 
       <ul class= "nav navbar-nav navbar-right"> 
         <li><a href= "#" class="active"> Home</a></li> 
         <li><a href= "#"> Login</a></li> 
         <li class="dropdown"> 
          <a href= "#" class="dropdown-toggle" data-toggle="dropdown"> Social Media<b class="caret"></b></a>       
          <ul class="dropdown-menu"> 
         <li><a href= "#" class="active">Facebook</a></li> 
         <li><a href= "#">Twitter</a></li> 
         <li><a href= "#"> Google+</a></li> 

          </ul> 
         </li> 
         <li><a href= "#"> About</a></li> 
         <li><a href= "#"> Contact</a></li> 
       </ul> 
       </div> 
      </div> 
    <div> 


    <div class="bottom"> 
      <div class="container"> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> 
        <p>Content for the first footer section.</p> 
       </div> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> 
        <p>Content for the second footer section.</p> 
       </div> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> 
        <p>Content for the third footer section.</p> 
       </div> 
      </div> 
    </div> 

</body> 
</html>

Vérifiez ce lien jsfiddle pour voir un exemple de travail. Il est préférable de changer l'étiquette du navbar navbar-inverse navbar-static-top de div à nav. Et ajoutez également le role="navigation" à chaque barre de navigation pour faciliter l'accessibilité.

J'espère que c'est utile!

Source

2014-09-20 19:40:35 Academia

twitter déroulant ne fonctionne pas

Répondre

Questions connexes