Permettre de cliquer sur twitter bootstrap dropdown toggle link?

Ajoutez simplement désactivé en tant que classe sur votre ancre:

 Dropdown  

Donc tous ensemble quelque chose comme:

 
 
  Dropdown   
 
Link 1
 
Link 2
 
 
  

Pour ceux d’entre vous qui se plaignent de “les sous-menus ne tombent pas”, je l’ai résolu de cette façon, qui me semble propre:

1) Outre votre

  Dropdown   

mettre un nouveau

et supprimez la , elle ressemblera à

  Dropdown 

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

Le second style consiste à append un remplissage à droite de la liste déroulante pour placer le curseur, empêchant ainsi le chevauchement du texte de l’élément de menu.

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

Comme il n’y a pas vraiment de réponse qui fonctionne (la réponse sélectionnée désactive la liste déroulante), ou remplace en utilisant javascript, voici.

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

 
 
 Dropdown  
 
Link 1
 
Link 2
 
 
  

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 soient surlignées lors du survol de l’une ou l’autre, vous devrez également remplacer le bootstrap, vous pourriez 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*/ } 

Je ne suis pas sûr du problème de faire de l’élément d’ancrage de niveau supérieur une ancre cliquable, mais voici la solution la plus simple pour faire en sorte que les vues de bureau aient l’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 mobile se comporte toujours comme il se doit, tandis que le menu du bureau s’étend au survol au lieu de cliquer.

Une solution alternative consiste simplement à supprimer la classe «dropdown-toggle» de l’ancre. Une fois que ce clic ne déclenche plus le dropwon.js, vous pouvez avoir le sous-menu à afficher lors du survol.

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.

Voici un petit hack qui passe du survol des données au basculement des 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'); } }); }); 

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

 Posts  
 
Create
  

Maintenant, vous cliquez sur le curseur pour la liste déroulante et le lien en tant que lien. Aucun css ou js nécessaire. J’utilise Bootstrap 4 4.0.0-alpha.6 , définir le caret n’est pas nécessaire, il apparaît sans le html.