web-dev-qa-db-fra.com

Comment faire pour qu'un menu déroulant Bootstrap 3 soit ouvert par défaut quand il se trouve dans une barre de navigation réduite

J'essaie de rendre mon menu déroulant ouvert par défaut lorsque ma barre de navigation réduite est ouverte. Voici un violon pour afficher mon code jusqu'à présent. 

Actuellement, si vous cliquez sur la barre de navigation quand elle est réduite, deux liens et un menu déroulant sont révélés. Vous devez cliquer à nouveau pour ouvrir le menu déroulant. 

Mon objectif est de rendre le menu déroulant ouvert par défaut et de masquer l'élément a.dropdown-toggle lorsque la barre de navigation réduite est ouverte. Un visuel de ce à quoi je voudrais ressembler lorsque la barre de navigation réduite est ouverte:

  • Lien
  • Lien
  • Menu déroulant
  • Action
  • Une autre action
  • Quelque chose d'autre ici
  • Lien séparé
  • Un lien de plus séparé

Ma première pensée a été d'utiliser display: none sur a.dropdown-toggle, mais cela masque tout le menu déroulant. En espérant que quelqu'un puisse suggérer quelque chose. Je suis ouvert aux solutions jQuery et CSS.

Mon balisage:

<nav class="navbar navbar-default" 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="#">Brand</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="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
javascriptjqueryhtmlcsstwitter-bootstrap-3
16
henrywright

Vous pouvez ajouter un style css pour un affichage mobile réactif . Collez-le dans votre fichier css:

@media only screen and (max-width:480px){
    .dropdown-menu{
        display: block;
        position: static;
        background-color:transparent;
        border:0 none;
        box-shadow:none;
        margin-top:0;
        position:static;
        width:100%;
    }
    .navbar-nav .dropdown-menu > li > a, 
    .navbar-nav .dropdown-menu .dropdown-header {
        padding:5px 15px 5px 25px;
    }
    .navbar-nav .dropdown-menu > li > a{
        line-height:20px;
    }
    .navbar-default .navbar-nav .dropdown-menu > li > a{    
        color:#777;
    }
}

vous pouvez le voir dans son intégralité ici: Demo jsfiddle

j'espère que cela pourra aider.

20
Tarjo

Selon la documentation de Bootstrap v3, vous pouvez utiliser Javascript pour vous connecter aux événements de réduction:

$(function () {
  $('#bs-example-navbar-collapse-1').on('shown.bs.collapse', function(e) {
    $('#my_dropdown').dropdown('toggle', 'open').hide();
    console.log('shown:', e);
  });
});

Je ne suis pas sûr que le résultat soit ce que vous voulez, car tant que le bouton "bascule" est caché, le sous-menu est toujours en retrait. Plutôt que d'essayer de plier autant Bootstrap, une meilleure solution serait peut-être d'avoir 2 menus avec la structure souhaitée pour chaque taille d'écran et d'afficher l'un ou l'autre en fonction des requêtes de support.

Fiddle: http://jsfiddle.net/scardine/tw82o88y/

3
Paulo Scardine

Vous pouvez ajouter une fonction javascript à votre code:

<script>
	$(document).ready(function(){
		$(".dropdown").hover(            
		function() {
			$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
			$(this).toggleClass('open');        
		},
		function() {
			$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
			$(this).toggleClass('open');       
		}
		);
	});
</script>

vous pouvez voir l'exemple et la démo dans dtc-eng

0
Android Maker