Éviter d'avoir à double-cliquer pour basculer Bootstrap dropdown

Dans Le Bootstrap 4, bootstrap.min.js et bootstrap.bundle.min.js maintenant le conflit dans dropdown.

en enlevant bootstrap.min.js, le problème de double clic de la liste déroulante sera résolu.

cela se produit parce que la syntaxe de Bootstrap de Twitter pour leurs dropdowns inclut un href balise. Vous aurez besoin d' preventDefault et stopPropagation pour éviter que cela ne se produise. Quelque chose comme ceci fera l'affaire:

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});

en regardant dans le code source d'angular.interface.bootstrap et le bootstrap natif.js ils ont les deux handlers pour les largages.

Solution Proposée: ajuster angulaire.interface.bootstrap dropdownToggle directive limitent seulement à la "Une" des attributs. donc, en résolvant ce problème, vous devez modifier dropdownToggle restreindre "CA" dans "A" Cela va cacher classe looker de l'angle.interface.bootstrap qui a déjà été traitées par bootstrap.js

pour la version compacte angulaire.interface.bootstrap chercher cette ligne la directive("dropdownToggle",function(){return{restreindre:"CA",exiger:"?^déroulante",lien:function(a,b,c,d){

remplacer " CA "par"A".

Cheers

j'ai eu le même problème que jaybro en https://stackoverflow.com/a/27278529/1673289, cependant leur solution n'a pas aidé.

la façon de corriger pour les deux cas était d'ajouter:

data-disabled="true"

dans l'élément data-toggle="dropdown" l'attribut.

Dans mon cas, les autres réponses ne fonctionnent pas.

application.js, j'ai eu:

//= require popper.min
//= require bootstrap-sprockets

suppression des pignons d'amorçage-correction du problème.

j'ai trouvé que sur certaines pages je devais double-cliquer et d'autres pages étaient simple-clic.

Supprimer data-toggle="dropdown" a fait les double clics en simple et a cassé les simples.

j'ai comparé le html dans l'outil dev (parce que le même html est servi) et j'ai trouvé sur mes pages de double clic que le div avec data-toggle ressemblait à ceci:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
     aria-haspopup="true" aria-expanded="false">

mais le simple clic html ressemble à ceci:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">

donc, dans le document prêt, j'ai utilisé la détection d'attr et la réponse par défaut de prevent et il a fait mon double clic s'ouvre en simple clic s'ouvre:

if (!($('#notifications').attr('aria-haspopup') == undefined &&
    $('#notifications').attr('aria-expanded') == undefined))
{
    $('.dropdown-toggle').click(function (e) { return false; });
}

cela peut se produire si Bootstrap est inclus deux fois dans votre projet.

si bootstrap.min.js et bootstrap.bundle.min.js (bootstrap et popper js) tous deux inclus dans le projet, il signifie redondant bootstrap js.

Le js doit être comme ceci: Soit: bootstrap.bundle.min.js seulement Ou: bootstrap.min.js et popper.min.js Pour de plus amples renseignements, visitez le site https://getbootstrap.com/docs/4.1/getting-started/contents/

Cela peut aussi se produire si vous avez plus d'un bootstrap.fichiers js! Vérifiez si vous avez encore une version plus ancienne et supprimez ce script.