Menu déroulant ne fonctionne pas sur les appareils mobiles

La version la plus récente de twitter bootstrap (2.3.2) ne semblent avoir un problème avec les menus déroulants sur les appareils mobiles.

Lorsque vous cliquez sur un menu déroulant élément après l'ouverture du menu, le menu se ferme et obtient pas de lien cliqué.
Vous pouvez le vérifier sur leur page d'exemple ici: http://twitter.github.io/bootstrap/examples/hero.html

J'ai trouvé un problème posté sur leur page github mais pas de solution: https://github.com/twitter/bootstrap/issues/7927

Quelqu'un connais l'astuce pour résoudre ce problème?

source d'informationauteur maddo7

  1. 35

    Une solution temporaire consiste à ajouter

    .dropdown-backdrop{
    position: static;
}

    dans le fichier css.

  2. 8

    Cela a fonctionné pour moi:

    $('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

    via robdodson sur github

  3. 2

    Pour moi, il a travaillé en ajoutant à mon styles:

    .dropdown-backdrop {
    z-index:0;
}

    presque la même réponse que Matthias, j'espère que cela aide.

  4. 0

    J'ai résolu ce problème.

    Mon code est ici

       <li class="dropdown custom open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu<b class="caret"></b></a>
             <ul class="dropdown-menu">
                 <li><a href="#">Sub menu</a></li>
                 <li><a href="#">Sub menu2</a></li>
              </ul>
           </li>

    Ajouter après le style dans votre CSS de la fie.

    @media (max-width: 767px) { 
.dropdown.custom:hover .dropdown-menu {
  visibility: visible;
  display:block;
  border-radius:0;

}
}

    Visite: http://www.s4auto.co.za/

  5. 0

    Aucun des habituels réponses semblait résoudre notre problème sur Android. Nous avons essayé de la accepté de répondre ici et un peu de javascript hacks ainsi:
    Bootstrap s'est Effondré Liens du Menu ne fonctionne Pas sur les Appareils Mobiles
    et
    http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/

    En fin de compte, nous avons découvert où la clôture était en cours, et à condition appelée clearMenus() seulement si les liens parent ou grand-parent n'a pas dropdown-submenu classe

    $(document)
.on('click.dropdown.data-api', function (e) {

    //fix start        
    var $parent = $(e.target).parent()
    var $grandparent = $parent.parent()

    if (!$parent.hasClass('dropdown-submenu') && !$grandparent.hasClass('dropdown-submenu')) {        
        clearMenus()
    }

    //clearMenus

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

}(window.jQuery);

    Espère que ça aide!