javascript - plugin - Evite tener que hacer doble clic para alternar la lista desplegable de Bootstrap

bootstrap tabs events

Question

Estoy usando un menú desplegable de Bootstrap. El problema es que nunca cae al primer clic; Necesito hacer clic dos veces para que se active. Supongo que el evento click se está atascando de alguna manera en algún lugar antes de propagarse ...

¿Hay alguna manera de arreglar eso?

Answer 1

¡Esto también puede suceder si tiene más de un archivo bootstrap.js! Compruebe si todavía tiene una versión anterior y elimine esa secuencia de comandos.

Answer 2

Al buscar en el código fuente de angular.ui.bootstrap y el bootstrap.js nativo, ambos tienen controladores para los menús desplegables.

Solución propuesta: ajustar la directiva angular.ui.bootstrap dropdownToggle restringir solo a los atributos "A". así que al resolver este problema necesitas modificar dropdownToggle Restringir "CA" en "A", esto ocultará Class looker de angular.ui.bootstrap que ya ha sido manejado por bootstrap.js

para la versión miniaturizada de angular.ui.bootstrap busque esta directiva de línea ("dropdownToggle", función () {return {restringir: "CA" , requerir: "? ^ menú desplegable", enlace: función (a, b, c, re){

Reemplace "CA" con "A".

Aclamaciones

Answer 3

Descubrí que en algunas páginas tendría que hacer doble clic y otras páginas con un solo clic.

Al eliminar data-toggle="dropdown" hicieron los doble clic en single y se rompieron los singles.

Comparé el html en la herramienta de desarrollo (porque se está sirviendo el mismo html) y encontré en mis páginas de doble clic que el div con data-toggle se veía así:

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

Pero el html con un solo clic se ve así:

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

Entonces, en el documento listo, utilicé la detección attr y previno la respuesta predeterminada e hizo que mi doble clic se abra en un solo clic se abre:

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

Answer 4

En Bootstrap 4, bootstrap.min.js y bootstrap.bundle.min.js ahora entran en conflicto en el menú desplegable.

Al eliminar bootstrap.min.js , el problema del doble clic desplegable se resolverá.

Answer 5

En mi caso, las otras respuestas no funcionan.

En application.js , tuve:

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

La eliminación de bootstrap-piñones solucionó el problema.

Answer 6

Esto puede suceder si de alguna manera se incluye Bootstrap dos veces en su proyecto.

Si bootstrap.min.js y bootstrap.bundle.min.js (bootstrap y popper js) ambos incluidos en el proyecto, significa bootstrap js redundante.

La combinación js debería ser así: O bien: bootstrap.bundle.min.js solamente O bien: bootstrap.min.js AND popper.min.js Para obtener información detallada, visite https://getbootstrap.com/docs/4.1/getting- iniciado / contenidos /

Answer 7

Esto sucede porque la sintaxis de Twitter Bootstrap para sus menús desplegables incluye una etiqueta href . stopPropagation que evitar stopPropagation y stopPropagation para evitar que esto suceda. Algo como esto hará el truco:

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

    return false;
});

Answer 8

Tuve el mismo problema que jaybro en https://.com/a/27278529/1673289 , sin embargo, su solución no ayudó.

La forma de solucionarlo en ambos casos fue agregar:

data-disabled="true"

en el elemento que tiene el atributo data-toggle="dropdown" .

Answer 9

Si alguien está usando angular con el módulo ui-bootstrap junto con la definición normal del menú desplegable HTML, también se necesitan dos clics.

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

=> Eliminar el data-toggle="dropdown" solucionará el problema.

Abrir el menú desplegable con un clic funcionará después de esto.

Referencia: https://github.com/angular-ui/bootstrap/issues/2294