Autoriser le clic sur le lien de basculement de la liste déroulante de twitter bootstrap ?

Question

Nous avons configuré la liste déroulante twitter bootstrap pour qu'elle fonctionne au survol (par opposition au clic [oui, nous sommes conscients de l'absence de survol sur les appareils tactiles]). Mais nous voulons être en mesure de faire fonctionner le lien principal lorsque l'on clique dessus.

Par défaut, twitter bootstrap le bloque, alors comment pouvons-nous le réactiver ?

Answer 1

Il suffit d'ajouter désactivé comme une classe sur votre ancre :

<a class="dropdown-toggle disabled" href="http://google.com">
    Dropdown <b class="caret"></b></a>

Donc, tout ensemble, quelque chose comme :

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>

Answer 2

Puisqu'il n'y a pas vraiment de réponse qui fonctionne (la réponse sélectionnée désactive la liste déroulante), ou qui soit remplacée par l'utilisation de javascript, voici ce que je propose.

Il s'agit d'un correctif tout en html et css (utilise deux <a> tags) :

<ul class="nav">
 <li class="dropdown dropdown-li">
    <a class="dropdown-link" href="http://google.com">Dropdown</a>
    <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
 </li>
</ul>

Maintenant, voici le CSS dont vous avez besoin.

.dropdown-li {
    display:inline-block !important;
}
.dropdown-link {
    display:inline-block !important; 
    padding-right:4px !important;
}
.dropdown-caret {
    display:inline-block !important; 
    padding-left:4px !important;
}

En supposant que vous voudrez les deux <a> pour qu'elles soient mises en évidence lors du survol de l'une ou l'autre, vous devrez également modifier bootstrap, vous pouvez jouer avec ce qui suit :

.nav > li:hover {
    background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
    color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
    color: black; /*dropdown item text color*/
}

Answer 3

Pour ceux d'entre vous qui se plaignent que "les sous-menus ne descendent pas", j'ai résolu le problème de cette façon, qui me semble propre :

1) En plus de votre

<a class="dropdown-toggle disabled" href="http://google.com">
     Dropdown <b class="caret"></b>
</a>

mettre un nouveau

<a class="dropdown-toggle"><b class="caret"></b></a>

et retirer le <b class="caret"></b> de sorte qu'il ressemblera à

<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>

2) Donnez-leur un style avec les règles css suivantes :

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

Le style de la classe .caret1 sert à la positionner absolument à l'intérieur de votre li à l'angle droit.

Le deuxième style sert à ajouter un peu de remplissage à droite de la liste déroulante pour placer le signe d'insertion, afin d'éviter que le texte de l'élément de menu ne se chevauche.

Vous disposez maintenant d'un bel élément de menu réactif qui est agréable à regarder, tant dans la version de bureau que dans la version mobile, et qui est à la fois cliquable et déroulable, selon que vous cliquez sur le texte ou sur le signe d'insertion.

Answer 4

Je ne suis pas sûr de la façon de faire de l'élément d'ancrage de niveau supérieur une ancre cliquable, mais voici la solution la plus simple pour que les vues de bureau aient l'effet de survol et que les vues mobiles conservent leur caractère cliquable.

// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
    // Enable menu hover for bootstrap
    // dropdown menus
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

De cette façon, le menu mobile se comporte toujours comme il le devrait, tandis que le menu de bureau se développe au survol de la souris plutôt qu'au clic.

Answer 5

Une autre solution consiste à supprimer la classe "dropdown-toggle" de l'ancre. Après cela, le clic ne déclenchera plus le dropwon.js, et vous voudrez peut-être que le sous-menu s'affiche au survol.