web-dev-qa-db-fra.com

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

J'utilise un menu déroulant Bootstrap. Le problème est qu'il ne descend jamais au premier clic; je dois cliquer 2 fois pour qu'il soit basculé. Je suppose que l'événement click devient en quelque sorte coincé quelque part avant de se propager ...

Y a-t-il un moyen de résoudre ce problème?

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap
40
Jago

Si quelqu'un utilise angular avec ui-bootstrap module avec normal bootstrap définition déroulante HTML, il y a aussi deux clics nécessaires.

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> Suppression du data-toggle="dropdown" résoudra le problème.

L'ouverture de la liste déroulante en un clic fonctionnera après cela.

Référence: https://github.com/angular-ui/bootstrap/issues/2294

75
minni

Dans Bootstrap 4, bootstrap.min.js et bootstrap.bundle.min.js maintenant en conflit dans la liste déroulante.

En enlevant bootstrap.min.js, le problème du double clic déroulant sera résolu.

31
Devil Bro

Cela se produit car la syntaxe Twitter Bootstrap pour leurs listes déroulantes inclut une balise href. Vous devrez preventDefault et stopPropagation pour éviter cela Quelque chose comme ça fera l'affaire:

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

    return false;
});
8
rdougan

Cela peut se produire si en quelque sorte Bootstrap est inclus deux fois dans votre projet.

Si bootstrap.min.js et bootstrap.bundle.min.js (bootstrap et popper js) sont tous deux inclus dans le projet, cela signifie redondant bootstrap js.

La combinaison js doit ressembler à ceci: Soit: bootstrap.bundle.min.js uniquement Ou: bootstrap.min.js ET popper.min.js Pour des informations détaillées, visitez https://getbootstrap.com/docs/ 4.1/mise en route/contenu /

8
Rajaneesh Singh

Dans BootStrap 4, il ne faut pas inclure à la fois "bootstrap.bundle.min.js" et "bootstrap.min.js". Cela entraînera le problème DropDown. Gardez uniquement "bootstrap.bundle. min.js "car il aura tout le code requis.

4
PraBhu

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

Dans application.js, J'ai eu:

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

La suppression des pignons d'amorçage a résolu le problème.

3
sscirrus

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

La solution pour les deux cas était d'ajouter:

data-disabled="true"

sur l'élément qui a le data-toggle="dropdown" attribut.

1
JoshSub

J'ai résolu le problème en supprimant le lien vers bootstrap.bundle.js et en ajoutant un lien vers popper.js

Avant

<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

Après

<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

Notez que j'ai téléchargé les fichiers bootstrap et les ai stockés dans un répertoire appelé 'bootstrap'. À l'intérieur, j'avais trois répertoires différents 'css', 'js', 'jquery'.

1
Nishant Ingle

Cela peut également se produire si vous avez plusieurs fichiers bootstrap.js! Vérifiez si vous disposez toujours d'une ancienne version et supprimez ce script.

1
Andreas Zorpidis

En regardant dans le code source de angular.ui.bootstrap et le bootstrap.js natif, ils ont les deux gestionnaires pour les listes déroulantes.

Solution proposée: ajustez angular.ui.bootstrap dropdownToggle directive restreindre uniquement aux attributs "A". donc en résolvant ce problème, vous devez modifier dropdownToggle restreindre "CA" en "A" cela masquera le chercheur de classe de angular.ui.bootstrap qui a déjà été géré par bootstrap.js

pour la version réduite de angular.ui.bootstrap, recherchez cette directive de ligne ("dropdownToggle", function () {return {restrict: "CA", require: "? ^ dropdown", link: function (a B c d){

remplacer "CA" par "A".

À votre santé

1
Jomaf

Comme @ rajaneesh-singh nous l'a dit ci-dessus, ce bogue se produit lorsque Bootstrap est inclus deux fois.

Dans mon cas, j'ai eu un doublon avec l'officiel bootstrap et avec la version Twitter:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.1.1/js/bootstrap.js"></script>

Je viens de supprimer la version Twitter et tout fonctionne bien maintenant.

0
b126

J'ai constaté que sur certaines pages, je devais double-cliquer et que d'autres pages étaient à simple clic.

Suppression de data-toggle="dropdown" a fait les doubles clics en simple et a brisé les singles.

J'ai comparé le html dans l'outil de développement (car 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 HTML en un seul clic 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 prévention de la réponse par défaut et cela a fait que mon double-clic s'ouvre en un seul clic:

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