Bootstrap v2 Desplegable de Navegación no funciona en Navegadores Móviles

Estoy teniendo un problema con el arranque de menús desplegables en los dispositivos móviles (Bootstrap 2). Una pregunta similar se le preguntó aquí desplegable con botones, sin embargo la respuesta de que fue un error inherente dentro de bootstrap que fue resuelto en una actualización. Me parecen estar teniendo el mismo problema así que tal vez es por mi marcado?

Tengo una plegable barra de navegación con menús desplegables y todo funciona perfectamente en los navegadores de escritorio. Sin embargo en un móvil, las listas desplegables se abrirá cuando haga clic en el menú desplegable pero al hacer clic en cualquier lista desplegable enlaces se acaba de doblar el menú de copia de seguridad de nuevo — los enlaces no puede ser alcanzado. He probado varios bootstrap versiones y no se puede corregir esto, así que sólo puedo imaginar es mi margen de utilidad. 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>

He aquí un ejemplo de replicar el código (lo siento, no puedo enviar el sitio): http://jsfiddle.net/yDjw8/1/

(Problema sólo puede ser visto/replica en el móvil — estoy usando iOS)

Cualquier ayuda sería muy apreciada.

  • Usted puede ser que necesite para encontrar otro CDN a link en su Violín. Cuando me visitan los archivos CSS y JS no se ha cargado correctamente. Yo intenté crear mi propio Violín utilizando la misma CDN y los enlaces a los archivos CSS y JS se rompió después de que me vuelve a cargar el Violín.
  • Gracias por este @MichaelFreake — he cambiado el hosting a dropbox – mejor?
  • Puedo confirmar que ahora es el trabajo en Chrome en mi Win7 de la máquina. El violín es también la visualización de la misma manera exacta en mi iPhone 5 iOS 6.1.3 utilizando tanto Chrome y Safari. Estoy viendo el comportamiento que usted ha descrito así. Haga clic en un enlace en el menú – destaca. Haga clic en el submenú enlace – se derrumba el menú.
InformationsquelleAutor Stuart | 2013-06-18

14 Kommentare

  1. 59

    En su record de bootstrap.min.js archivo, encontrar la subcadena

    "ontouchstart"

    y reemplazarlo con

    "disable-ontouchstart"

    Echa un vistazo a este similiar ASÍ, pregunta:
    Bootstrap se Derrumbó Enlaces del Menú No funciona en Dispositivos Móviles

    • Muchas gracias!
    • A mí me funcionó así.Gracias !
    • Gracias , funciona perfectamente después de horas de navegación en la web T_T, gracias !
    • Muchas gracias hombre!!!!!!!!. usted salvó mi trabajo
    • Esto es absurdo! Tengo que editar el código fuente?
    • Esta solución no parece trabajar con bootstrap 3.3.6 :/
    • Esto no es una «solución».
    • Sigue trabajando !!! Gracias

  2. 13

    Encontrado esta revisión 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>     

    Trabajado en dos sistemas de navegación que he construido.

    • Gracias por esta respuesta. Esto hizo que los vínculos de trabajo, pero la lista desplegable no se caiga de nuevo en la versión que he probado. De cualquier manera, no me lo hubiese puesto como el aceptado contestar, pero @Jollyra llegó primero!
    • gracias por la solución. sin embargo, hay dos problemas: 1. las listas desplegables no cierre las demás listas desplegables cuando se abren; y 2. los enlaces dentro de las listas desplegables no propagar sus JS. la publicación de una corrección: stackoverflow.com/a/25041753/437019
  3. 9

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

    safari en el iPhone sólo el apoyo de evento click para <a> y <input> elemento.
    Véase este pasaje Haga clic en evento delegación en el iPhone.

    Así que tenemos que añadir personalizado haga clic en la delegación. Código siguiente se va a resolver el problema.

    $('[data-toggle=dropdown]').each(function() {
     this.addEventListener('click', function() {}, false);
    });
    • Este. Muchas gracias compañero.
    • ya esta resuelto el problema para mí también, muchas gracias!
  4. 4

    He resuelto este mismo problema en hacer esto:

    1.Abra su js/bootstrap-dropdown.js o el record de versión de la misma.

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

    3.No debe ser sólo 4 se produce de la misma. 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)

    Usted debe insertar esta nueva línea entre el 2 y 3 ocurrencias:

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

    4.Noticias de la pieza de código 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)

    Ser cuidadoso con el record de versiones de Bootstrap.js… por lo que debe concatenar la nueva línea en la posición exacta en él.

    ¡Buena suerte! 🙂

    • la mejor solución, para mí funcionaba perfectamente para versiones antiguas de BS. Gracias!
  5. 4

    Puedo recomendar la descarga de la última archivos Bootstrap y la sustitución de la bootstrap.js y bootstrap.min.js en el servidor con las nuevas versiones.

    Esta solucionado el problema para mí.

    • Esta pregunta es bastante viejo, sin embargo en el momento de escribir, yo ya había probado esta varias veces.
    • Trabajó para mí, va desde BS 3.7.1 BS 4.1.3
  6. 4

    He encontrado la solución de este de bootstrap git hub foro.
    Es necesario incluir sólo una línea de código en el script en el documento listo,

    $(‘body’).en(‘touchstart.desplegable’, ‘.dropdown-menu’, function (e) { e.stopPropagation(); });

    Su trabajo para mí!!!

  7. 2

    Esto parece funcionar sin problemas. La clase de «abrir» ya existe con bootstrap y debería estar trabajando, pero por alguna razón no lo es. Este código obliga a ejecutar en consecuencia. 🙂

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

    Parece que es de todos los que trabajan para mí, tal vez trate de reemplazar el arranque de archivos con una copia nueva en caso de que accidentalmente metido nada allí. O si eso no funciona, asegúrese de que usted está importando todo. Está usted seguro de que son importadores de todo el CSS y el JS?

    • Por desgracia he intentado volver a agregar Bootstrap alrededor de 5 veces. Todo es todo lo que hay fuera de la caja. Realmente estoy atascado en este un comportamiento extraño por ninguna razón. Como he dicho antes, todo funciona bien en el escritorio, pero obviamente que no va a estar en uso 🙂
  9. 1

    Cuando usted haga clic en el menú desplegable, se agrega el open clase a su <li class="dropdown"> dando: <li class="dropdown open">. Cuando usted haga clic en un enlace en el menú desplegable, o el ‘elemento de Menú 2 (desplegable)», el open clase se quita causando la dropmenu para doblar de nuevo.

    La siguiente violín muestra cómo detener el evento click de la propagación, pero puede causar problemas en otros lugares. También, yo sólo impidió la propagación en el punto #1 en la lista desplegable. Usted puede usar jQuery para hacer que esto suceda en todos los elementos de la lista desplegable.

    JS Violín: http://jsfiddle.net/yDjw8/2/

  10. 1

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

    En la parte superior de asbanks la respuesta, este script también se propaga a JS llamadas de los vínculos dentro de los menús desplegables, y un abierto desplegable cierra otras abiertas.

    $(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");
      }
    });
    • Este código, como está, solucionado mi problema incluso en Bootstrap 3.3.7
  11. 1

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

    He encontrado una divertida solución después de varios ensayos y errores:

    //clueless hack here!!!! otherwise dropdown menu doesn't work
    $('.dropdown-toggle').dropdown('toggle');
    $('.dropdown-toggle').dropdown('toggle');
    • Sí, esto funciona para mí. No sé por qué lo dijo dos veces que funciona.
    • ok, esto funciona… pero realmente cae en el «¿por qué ESTE trabajo» tipo de cosas.
  12. 0

    jquery-1.11.2, bootstrap-3.3.2:

    $('#yourId').on('hidden.bs.dropdown', function (){
        $(this).click(function (event) {
           $('.dropdown-toggle').dropdown('toggle'); 
        });
    });
    • Sería de gran ayuda si usted se expuso sobre la causa del problema, y por qué su solución funciona.
    • es un trabajo sobre mí porque yo uso el dropdown.js de bootstrap. y el mismo error suceder.
    • Mi comentario es realmente acerca de la provisión de información de su respuesta, en vez de sólo proporcionar un fragmento de código. Es generalmente más útil para explicar en lugar de simplemente decir: «aquí, esto funciona».
  13. 0

    Yo creo que si hace lo siguiente, los enlaces funcionan correctamente

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

    la adición de role="button" a <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> trabajado para mí

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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea