Comment faire un Bootstrap 3 menu déroulant ouvert par défaut lorsqu'il est à l'intérieur d'un effondrement de l'barre de navigation

Je suis en train de faire mon menu déroulant ouvert par défaut lors de mon effondré barre de navigation s'ouvre. Ici est un violon pour montrer mon code jusqu'à présent.

Actuellement, si vous cliquez sur la barre de navigation quand il est dans un état effondré, deux liens et un menu déroulant s'affiche. Vous devez cliquez sur nouveau pour ouvrir le menu déroulant.

Mon objectif est de rendre le menu déroulant ouvert par défaut et de masquer les a.dropdown-toggle élément lors de l'effondrement barre de navigation s'ouvre. Un visuel de la façon dont je tiens à regarder lors de l'effondrement barre de navigation est ouverte:

Lien
Lien
~~liste Déroulante~~
Action
Une autre action
Quelque chose d'autre ici
Séparés lien
Un plus séparés lien

Ma première pensée a été d'utiliser display: none sur a.dropdown-toggle mais qui vient se cache l'ensemble du menu déroulant. En espérant que quelqu'un peut suggérer quelque chose. Je suis ouvert à la fois à jQuery et CSS solutions.

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>

essayez d'ajouter un plus à l'ul avec même des liens de la liste déroulante et le style d'afficher et de masquer en fonction de la largeur à l'aide mediaqueries.
si vous voulez de la chaussure, par défaut :jsfiddle.net/mp1d2jz7/2
qui n'a pas tout à fait faire ce dont j'ai besoin. J'aimerais masquer l' .dropdown-toggle élément.

OriginalL'auteur henrywright | 2014-08-12

20

Vous pouvez ajouter un style css pour un affichage mobile.
de le coller 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 : Démo jsfiddle

espère que ça aide.

vous avez juste besoin d'ajouter un peu de css comme ci-dessus dans votre fichier css et html la structure n'est pas modifiée.
Oui bien sûr, merci pour ça. Le a.dropdown-toggle élément est toujours à l'affiche?
j'ai été mise à jour ici : JSFiddle mise à Jour
J'ai été mauvaise compréhension, je suis désolé. J'ai les dernières mises à jour: jsFiddle mise à Jour de Correctif
J'ai eu des problèmes avec ce code.. C'est agréable jusqu'à ce que vous avez un autre lien ou un autre menu déroulant après la première liste déroulante, pour une raison quelconque, l'autre des liens superpositions le menu déroulant ci-dessus, il a donc son incapacité à cliquer.. Ici est un exemple de jsFiddle, avis lorsque vous passez la souris au-dessus du menu déroulant, le dernier lien est accentué au lieu de cela jsFiddle

OriginalL'auteur Tarjo
3

Selon les docs pour Bootstrap v3, vous pouvez utiliser le Javascript pour le crochet sur l'effondrement des événements:
```
$(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 est ce que vous voulez, parce que, tandis que le bouton "basculer" est caché, le sous-menu est toujours en retrait. Au lieu d'essayer de plier Bootstrap que beaucoup, peut-être une meilleure solution est d'avoir 2 menus avec la structure souhaitée pour chaque taille de l'écran et afficher l'un ou l'autre selon les requêtes de média.

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

Cela fonctionne tant que vous n'avez pas redimensionner le navigateur. Si vous cliquez sur le burger bouton lorsque la valeur liquidative est effondré, et puis plus tard redimensionner le navigateur à l'endroit où la valeur liquidative est plus réduit, le menu déroulant est alors disparu de la valeur liquidative.
Ouvert uniquement le dernier menu déroulant.

OriginalL'auteur Paulo Scardine
-1

Juste enlever data-toggle="dropdown"

OriginalL'auteur nizarb

Vous devez vous connecter pour publier un commentaire.