Bootstrap menu déroulant javascript

J'ai été troublé par ce problème pendant des heures maintenant. J'ai une barre de navigation dans ma page html avec un bouton déroulant et quelques options. Lorsque je clique sur le bouton, je peux voir mes options. Je voulais que le texte du bouton change lorsque vous sélectionnez une option. P.S. Copier et coller le code sous Html et Javascript dans le codepen fonctionnera parfaitement. Pour une raison quelconque, mon compte ne cesse de me donner une fenêtre d'erreur en ce moment. Si ses résolutions affichent Ill le lien codepenBootstrap menu déroulant javascript

Html -

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <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="#">Logo goes here</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
        <div class="navbar-form"> 
     <div class="btn-group"> 
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account Div <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Hollywood Account</a></li> 
      <li><a href="#">Another Account</a></li> 
      <li><a href="#">Yet another Account</a></li> 
      </ul> 
     </div> 
        </div> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid -->

Javascript -

$('.dropdown-menu li a').click(function() { 
    $('.btn:first-child').html($(this).text() + ' <span class="caret"></span>'); 
});

Je ne peux comprendre ce que la question est. À ce stade, je pense que je suis includin probablement les fichiers worng js pour bootstrap qui sont les suivantes:

dans la balise <head> je:

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
     crossorigin="anonymous"></script> 
<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> 
<script> 
    $(".dropdown-menu .dropdown-menu-right li a").click(function(){ 
     $(".btn:first-child").html($(this).text()+' <span class="caret"></span>'); 

    }); 
</script>

et à la base de la page je:

<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

Source

2016-04-12 newkid101

Regardez ce Fiddle de this question

$('.dropdown-menu a').on('click', function(){  
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');  
})

Source

2016-04-12 02:44:24

Je l'ai déjà fait et essayé. Rien ne semble fonctionner quand ma page se charge dans le navigateur – newkid101

Bootstrap menu déroulant javascript

Répondre

Questions connexes