web-dev-qa-db-fra.com

Autoriser cliquer sur le lien déroulant du menu déroulant d'amorçage Twitter?

Nous avons configuré le menu déroulant de démarrage Twitter pour fonctionner en survol (au lieu de cliquer sur [oui, nous sommes conscients du non survol sur les appareils tactiles]). Mais nous voulons pouvoir utiliser le lien principal lorsque nous cliquons dessus.

Par défaut, Twitter Bootstrap le bloque. Comment pouvons-nous le réactiver?

drop-down-menuhyperlinktwitter-bootstrap
67
Hailwood

Ajoutez simplement disabled en tant que classe sur votre ancre:

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

Donc, tous 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>
121
David Spence

Pour ceux d'entre vous qui se plaignent du fait que "les sous-menus ne tombent pas", je l'ai résolu de cette façon, ce qui me semble clair:

1) Outre 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 supprimez la balise <b class="caret"></b>, ainsi elle ressemblera à

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

2) 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 à le positionner absolument dans votre li, dans le coin droit.

Le second style consiste à ajouter un peu de remplissage à la droite du menu déroulant pour placer le curseur, évitant ainsi le chevauchement du texte de l'élément de menu.

Maintenant, vous avez un élément de menu Nice réactif qui a l'air bien à la fois dans les versions de bureau et mobile et qui est à la fois cliquable et déroulant selon que vous cliquez sur le texte ou sur le curseur.

11
Pere

Puisqu'il n'y a pas vraiment de réponse qui fonctionne (la réponse sélectionnée désactive le menu déroulant), ou remplace l'utilisation de javascript, voilà. 

Ceci est tout le correctif HTML et CSS (utilise deux balises <a>):

<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 souhaitiez que les deux balises <a> soient mises en surbrillance au survol de l’une ou de l’autre, vous devrez également remplacer le bootstrap. Vous pourrez peut-être jouer avec les éléments suivants: 

.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*/
}
10
kingPuppy

Je ne suis pas sûr du problème pour transformer l'élément d'ancrage de niveau supérieur en un ancre cliquable, mais voici la solution la plus simple pour que les vues de bureau aient un effet de survol, et les vues mobiles conservent leur capacité de clic.

// 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 du portable se comporte toujours comme il se doit, tandis que le menu du bureau s’étendra au survol plutôt qu’au clic.

4
KJ Prince

Une solution alternative consiste simplement à supprimer la classe 'dropdown-toggle' de l'ancre. Après ce clic, le fichier dropwon.js ne sera plus déclenché. Vous souhaiterez peut-être que le sous-menu s'affiche en survol. 

2
Chuntao Lu

Vous pouvez utiliser un extrait de code javascript

$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});

Cela dissociera l’événement click empêchant le changement d’URL.

1
Ian

Cela peut être fait plus simplement en ajoutant deux liens, l'un avec texte et href et l'autre avec menu déroulant et caret:

<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
    <li><a href="{{route('posts.create')}}">Create</a></li>
</ul>

Maintenant, vous cliquez sur le curseur pour la liste déroulante et le lien en tant que lien. Pas de css ou js nécessaires . J'utilise Bootstrap 4 4.0.0-alpha.6 , la définition du curseur n'est pas nécessaire, il apparaît sans le code HTML.

0
Jorn

Voici un petit hack qui est passé de survol de données à basculement de données en fonction de la largeur de l'écran:

/**
 * Bootstrap nav menu hack
 */
$(window).on('load', function () {
    // On page load
    if ($(window).width() < 768) {
        $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
    }

    // On window resize
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
        } else {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
        }
    });
});
0
Allure Web Solutions