web-dev-qa-db-fra.com

Le menu déroulant ne fonctionne pas sur les appareils mobiles

La version la plus récente de Twitter Bootstrap (2.3.2) semble avoir un problème avec les menus déroulants sur les appareils mobiles.

Lorsque vous cliquez sur un élément du menu déroulant après avoir ouvert le menu, le menu se ferme simplement et aucun lien n'est cliqué. Vous pouvez le voir sur leur exemple de page ici: http: //Twitter.github. io/bootstrap/examples/hero.html

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

Est-ce que quelqu'un connaît le truc pour le réparer?

twitter-bootstraptwitterdrop-down-menuresponsive-design
13
maddo7

Une solution temporaire consiste à ajouter

.dropdown-backdrop{
    position: static;
}

au fichier css.

36
maddo7

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

8
Ryan

Pour moi, cela a fonctionné en ajoutant à mes styles:

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

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

2
Raúl Contreras

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>

Ajoutez le style suivant dans votre fichier CSS.

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

}
}

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

0
Binilsh K.B

Aucune des réponses habituelles ne semblait résoudre notre problème sous Android. Nous avons essayé ici la réponse acceptée et quelques modifications javascript: Liens de menu amarrés condensés ne fonctionnant 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 l'emplacement de la fermeture et appelé conditionnellement clearMenus() uniquement si les liens parent ou grand-parent n'avaient pas de classe dropdown-submenu.

$(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);

J'espère que cela pourra aider!

0
Julian Dormon