ejemplos bootstrap javascript html css responsive-design twitter-bootstrap-2

javascript - ejemplos - navbar bootstrap 4



Bootstrap v2 Dropdown Navigation no funciona en los navegadores móviles (14)

Estoy teniendo un problema con los menús desplegables del menú Bootstrap en dispositivos móviles (Bootstrap 2). here se hizo una pregunta similar con los botones desplegables, sin embargo, la respuesta fue un error inherente dentro de bootstrap que se resolvió en una actualización. Parece que tengo el mismo problema, así que tal vez sea por mi marca.

Tengo una barra de navegación plegable con menús desplegables y todo funciona perfectamente en los navegadores de escritorio. Sin embargo, en un dispositivo móvil, los menús desplegables se abrirán cuando haga clic en el menú desplegable, pero al hacer clic en cualquier enlace desplegable solo se volverá a plegar el menú desplegable de nuevo, no se puede acceder a los enlaces. He intentado varias versiones de bootstrap y no puedo corregir esto, así que solo puedo imaginar que es mi marca. Aquí está:

<header class="navbar"> <div class="navbar-inner"> <div class="container"> <a href="#"><h1>Branding</h1></a> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#">Menu Item 1</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Item 1</a></li> <li><a href="#">Dropdown Item 2</a></li> <li><a href="#">Dropdown Item 3</a></li> <li><a href="#">Dropdown Item 4</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </header>

Aquí hay un ejemplo que replica el código (lo siento, no puedo enviar el sitio): http://jsfiddle.net/yDjw8/1/

(El problema solo se puede ver / replicar en el móvil; estoy usando iOS)

Cualquier ayuda sería muy apreciada.

Cuando hace clic en el menú desplegable, agrega la clase open a su <li class="dropdown"> dándole: <li class="dropdown open"> . Cuando hace clic en un enlace en el menú desplegable o en el ''Elemento del menú 2 (menú desplegable)'', la clase open se elimina, lo que hace que el menú desplegable se repliegue nuevamente.

El siguiente violín muestra cómo detener la propagación del evento de clic, pero puede causar problemas en otros lugares. Además, solo prevení la propagación en el artículo # 1 en el menú desplegable. Puede usar jQuery para que esto suceda en todos los elementos del menú desplegable.

JS Fiddle: http://jsfiddle.net/yDjw8/2/

Encontré este arreglo para la versión 2.3.2:

<script> jQuery(document).ready(function($) { $("li.dropdown a").click(function(e){ $(this).next(''ul.dropdown-menu'').css("display", "block"); e.stopPropagation(); }); }); </script>

Trabajé en dos sistemas de navegación separados que construí.

Encontré la solución de esto en el foro de bootstrap git-hub. Debe incluir solo una línea de código en el script en el documento listo como,

$ (''body''). on (''touchstart.dropdown'', ''.dropdown-menu'', function (e) {e.stopPropagation ();});

Su trabajo para mí !!!

Esta solución es para Bootstrap 2.3.2 y se basa en la respuesta de @asbanks ( https://.com/a/18107103/437019 ).

Además de la respuesta de asbanks, este script también propaga las llamadas JS desde los enlaces dentro de los menús desplegables, y un menú desplegable abierto cierra otros abiertos.

$(function() { return $("a.dropdown-toggle:not(.multiselect)").click(function(e) { $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none"); $(this).next("ul.dropdown-menu").css("display", "block"); return e.stopPropagation(); }); }); $(document).on(''click click.dropdown.data-api'', function(e) { if (!$(e.target).closest(''.dropdown, .multiselect-container'').length) { return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none"); } });

Esto parece funcionar sin problemas. La clase "abierta" ya existe con bootstrap y debería estar funcionando, pero por alguna razón no lo es. Este código lo obliga a correr en consecuencia. :)

jQuery(document).ready(function($) { $("li.dropdown").click(function(e){ $(this).toggleClass("open"); }); });

Estoy usando BootStrap 3.1.1. He intentado muchas respuestas, el menú desplegable funciona bien en dispositivos Android pero aún no funciona en dispositivos iOS. Finalmente encuentro la causa raíz del problema.

safari en iPhone solo admite eventos de clic para el elemento <a> y <input> . Vea este pasaje Haga clic en delegación de eventos en el iPhone .

Así que necesitamos agregar una delegación de clics personalizada. El siguiente código resolverá el problema.

$(''[data-toggle=dropdown]'').each(function() { this.addEventListener(''click'', function() {}, false); });

Estoy usando bootstrap-3.3.1 y estoy experimentando el mismo problema en una aplicación de Phonegap para Android.

Encontré una solución divertida después de varias pruebas y errores:

// clueless hack here!!!! otherwise dropdown menu doesn''t work $(''.dropdown-toggle'').dropdown(''toggle''); $(''.dropdown-toggle'').dropdown(''toggle'');

Parece que todo está funcionando para mí, tal vez intente reemplazar sus archivos de arranque con una copia nueva en caso de que accidentalmente arruine algo allí. O si eso no funciona, asegúrese de que está importando todo. ¿Estás seguro de que estás importando todos los archivos CSS y JS?

Recomiendo descargar los últimos archivos Bootstrap y reemplazar los archivos bootstrap.js y bootstrap.min.js en su servidor con las nuevas versiones.

Esto solucionó el problema para mí.

Resolví este mismo problema haciendo esto:

1.Abra su js/bootstrap-dropdown.js o la versión reducida de este.

2.Encuentre las líneas o lugares para: touchstart.dropdown.data-api

3.Debería haber solo 4 veces. Algo como esto:

.on(''click.dropdown.data-api touchstart.dropdown.data-api'', clearMenus) .on(''click.dropdown touchstart.dropdown.data-api'', ''.dropdown form'', function (e) { e.stopPropagation() }) .on(''click.dropdown.data-api touchstart.dropdown.data-api'' , toggle, Dropdown.prototype.toggle) .on(''keydown.dropdown.data-api touchstart.dropdown.data-api'', toggle + '', [role=menu]'' , Dropdown.prototype.keydown)

Debe insertar esta nueva línea entre la 2ª y 3ª ocurrencias:

.on(''touchstart.dropdown.data-api'', ''.dropdown-menu'', function (e) { e.stopPropagation() })

4. Su código de noticias debe ser algo como esto:

.on(''click.dropdown.data-api touchstart.dropdown.data-api'', clearMenus) .on(''click.dropdown touchstart.dropdown.data-api'', ''.dropdown form'', function (e) { e.stopPropagation() }) .on(''touchstart.dropdown.data-api'', ''.dropdown-menu'', function (e) { e.stopPropagation() }) .on(''click.dropdown.data-api touchstart.dropdown.data-api'' , toggle, Dropdown.prototype.toggle) .on(''keydown.dropdown.data-api touchstart.dropdown.data-api'', toggle + '', [role=menu]'' , Dropdown.prototype.keydown)

Tenga cuidado con las versiones reducidas de Bootstrap.js ... por lo que debe concatenar la nueva línea en la posición exacta en ella.

¡Buena suerte! :)

Supongo que si haces lo siguiente, los enlaces funcionarán correctamente.

$(document).ready(function(){ $(''.youClass'').click(function(){ var menuItem = ''<a class=" " href=" ">Log Out</a>''; $(''.anotherClass'').append(''<li class=".youClass">''+ menuItem +''</li>''); }); });

agregar role="button" a <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> trabajó para mí

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>

jquery-1.11.2, bootstrap-3.3.2:

$(''#yourId'').on(''hidden.bs.dropdown'', function (){ $(this).click(function (event) { $(''.dropdown-toggle'').dropdown(''toggle''); }); });