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

Vous pouvez utiliser un extrait de javascript

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

Cela déliera l'événement de clic empêchant le changement d'url.

Answer 2

Voici une petite astuce qui permet de passer de la fonction data-hover à la fonction data-toggle 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');
        }
    });
});

Answer 3

Cela peut être fait plus simplement en ajoutant deux liens, l'un avec le texte et le href et l'autre avec la liste déroulante et le 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 caret pour la liste déroulante et le lien comme un lien. Pas besoin de css ou de js. J'utilise Bootstrap 4 4.0.0-alpha.6 la définition du signe d'insertion n'est pas nécessaire, il apparaît sans le html.