web-dev-qa-db-fra.com

Bootstrap 3: comment rendre la tête du lien déroulant cliquable dans la barre de navigation

J'utilise la barre de navigation par défaut et quelques éléments de la liste sont des listes déroulantes. Je ne parviens pas à cliquer sur le lien qui déclenche la liste déroulante. Je sais que je pourrais simplement ajouter un lien en double dans la liste déroulante, mais je préfère ne pas le faire. Est-il possible de faire du lien principal un lien cliquable (pas seulement une poignée pour la liste déroulante)?

Pour référence, voir le premier lien dans la liste déroulante ci-dessous. Je souhaite que les utilisateurs puissent cliquer dessus et accéder à la page vers laquelle ils pointent.

<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
  <div class="navbar-header">...</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 navbar-right">
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           I DONT WORK! <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li><a href="/page2">Page2</a></li>
         </ul>
       </li>
       <li><a href="#">I DO WORK</a></li>
     </ul>               
   </div><!-- /.navbar-collapse -->
 </nav>
javascriptcsstwitter-bootstrap-3
64
emersonthis

Voici le code qui glisse dans le sous-menu en survol, et vous permet de rediriger vers une page si vous cliquez dessus.

Comment: extrayez class="dropdown-toggle" data-toggle="dropdown" d'une balise et ajoutez css.

Voici la démo sur jsfiddle . Pour la démo, veuillez ajuster le séparateur de jsfiddle afin d'afficher la liste déroulante due à Bootstrap CSS. Jsfiddle ne vous laissera pas rediriger vers une nouvelle page.

 enter image description here 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <style type='text/css'>
        ul.nav li.dropdown:hover ul.dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-fixed-top admin-menu" role="navigation">
        <div class="navbar-header">...</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 navbar-right">
                <li class="dropdown"><a href="http://stackoverflow.com/">Stack Overflow <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="/page2">Page2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">I DO WORK</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</body>
</html>
75
Win

Ajoutez simplement la classe disabled sur votre ancre:

<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>

Et vous êtes libre de partir.

51
Dawid Winiarz

Voici un petit hack basé sur Bootstrap 3.3 utilisant un peu de jQuery.

Un clic sur un menu déroulant ouvert exécute le lien.

$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
17
garfyld

1: supprimer dropdown-trigger: 

data-toggle="dropdown"

2: ajoutez ceci votre css

.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    margin-top: 0px;
}

posté pour les gens comment trébuché sur ce

12
user3314900

Je sais que c'est un peu vieux, mais je l'ai récemment découvert en cherchant une solution similaire. Compter sur les événements hover n'est pas bon pour un design réactif, et particulièrement terrible sur les écrans mobiles/tactiles. J'ai fini par faire une petite modification dans le fichier dropdown.js qui vous permet de cliquer sur l'élément de menu pour ouvrir le menu. Si vous cliquez à nouveau sur l'élément de menu, il le suivra.

La bonne chose à propos de cela est qu'il ne repose pas sur le survol du tout et qu'il fonctionne donc toujours très bien sur un écran tactile.

Je l'ai posté ici: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

J'espère que cela pourra aider!

11
Matthew Hanlon

Voici ma solution qui utilise JQuery dans votre en-tête et fonctionne sur Mobile.

Sur le mobile, les liens supérieurs requièrent deux tapotements: un pour faire défiler le menu et un pour aller à son lien.

$(function(){
  $('.dropdown-toggle').click(
    function(){
      if ($(this).next().is(':visible')) {
        location.href = $(this).attr('href');;
      }
     });
  });
});

4
Enjabain

Ajouter disabled Class dans votre ancre, voici js:

$('.navbar .dropdown-toggle').hover(function() {
  $(this).addClass('disabled');
});

Mais ceci n’est pas compatible avec les appareils mobiles, vous devez donc supprimer disabled class pour mobile.

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});
3
Himanshu Shakhar

Toute personne arrivant ici qui veut une réponse rapide à ce problème. Remplacez la fonction "Dropdown.prototype.toggle" dans votre fichier bootstrap.js (ou dropdown.js) par ce qui suit:

  Dropdown.prototype.toggle = function (e) {
var $this = $(this)

if ($this.is('.disabled, :disabled')) return

var $parent  = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
    if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

    var relatedTarget = { relatedTarget: this }
    $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

    if (e.isDefaultPrevented()) return

    $parent
      .toggleClass('open')
      .trigger('shown.bs.dropdown', relatedTarget)

    $this.focus()
}
else
{
    var href = $this.attr("href").trim();

    if (href != undefined && href != " javascript:;")
        window.location.href = href;
}

return false
  }

Au deuxième clic (c.-à-d. Si l'élément de menu a la classe "open"), il vérifie d'abord si le href est indéfini ou défini sur "javascript :;" avant de vous envoyer le long de votre chemin joyeux.

Prendre plaisir!

1
pimbrouwers

Cela active le lien dans le menu de niveau supérieur du menu déroulant lorsqu’il est ouvert et le désactive lorsqu’il est fermé, avec le seul inconvénient de devoir apparemment "taper" deux fois en dehors du menu déroulant pour le fermer dans les appareils mobiles.

$(document).on("page:load", function(){
    $('body').on('show.bs.dropdown', function (e) {
        $(e.relatedTarget).addClass('disabled')
    });
    $('body').on('hide.bs.dropdown', function (e) {
        $(e.relatedTarget).removeClass('disabled')
    });
});

Remarque cela suppose le balisage "standard" et les Turbolinks (Rails). Vous pouvez essayer avec $ (document) .ready (...)

1
hisa_py

La plupart des solutions ci-dessus ne sont pas adaptées aux téléphones mobiles.

La solution que je propose détecte si son appareil n'est pas tactile et que le navbar-toggle (menu hamburger) n'est pas visible et fait en sorte que l'élément de menu parent le sous-menu de révélation en survol et et suive son lien au clic

Fait également le top 0 de la marge, car l’écart entre la barre de navigation et le menu de certains navigateurs ne vous permettra pas de survoler les sous-éléments

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

0
GiorgosK

je sais qu'il est trop tard, mais quiconque est venu ici pour obtenir de l'aide vous pouvez voir ce message. Il existe deux options, soit utiliser CSS/JavaScript. Si vous utilisez CSS, il sera applicable aux appareils d'une largeur supérieure à 769px pour le menu supérieur cliquable. être travail parfaitement f

Voir ici pour l'article 

0
Sikander

Sinon, voici une solution simple de jQuery:

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});
0
Allure Web Solutions

Cela a fonctionné dans mon cas:

$('a[data-toggle="dropdown"]').on('click', function() {

    var $el = $(this);

    if ( $el.is(':hover') ) {

        if ( $el.length && $el.attr('href') ) {
            location.href =$el.attr('href');
        }

    }

});
0
Ilán Vivanco