Bootstrap v2 Dropdown Navigation ne fonctionne pas sur les navigateurs mobiles

a trouvé ce correctif pour la version 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>     

a travaillé sur deux systèmes de navigation que j'ai construits.

j'utilise BootStrap 3.1.1. J'ai essayé de nombreuses réponses, menu déroulant fonctionne très bien sur les appareils Android, mais ne fonctionne toujours pas sur l'appareil iOS. Finalement, je trouve la cause profonde du problème.

safari sur iPhone uniquement en charge l'événement click pour <a> et <input> élément . Voir ce passage Click event delegation sur l'iPhone .

donc nous avons besoin d'ajouter custom click délégation. Suivant le code résoudra le problème.

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

j'ai résolu ce même problème en faisant ceci:

1.Ouvrez votre js/bootstrap-dropdown.js ou sa version miniifiée.

2.Trouvez les lignes ou les lieux pour: touchstart.dropdown.data-api

3.Il ne devrait y avoir que 4 occurrences. Quelque chose comme ceci:

.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)

vous devez insérer cette nouvelle ligne entre les 2ème et 3ème occurences:

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

4.Votre nouvelle pièce de code doit être quelque chose comme ceci:

.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)

soyez prudent sur les versions miniaturisées de Bootstrap.js... donc, vous devez concaténer la nouvelle ligne à la position exacte.

bonne chance! :)

j'ai trouvé la solution de ce de Bootstrap git-hub forum. Vous devez inclure juste une ligne de code dans le script sur le document prêt comme,

$('body').('évènements touchstart.déroulant', '.dropdown-menu', function (e) { E. arrêt de la production(); });

Son travail pour moi!!!

je recommande de télécharger les derniers fichiers Bootstrap et de remplacer le bootstrap.js et bootstrap.min.js sur votre serveur avec les nouvelles versions.

Cela a réglé le problème pour moi.

Cela semble fonctionner sans aucun problème. La classe "ouvert" existe déjà avec bootstrap et devrait fonctionner, mais pour une raison quelconque, il n'est pas. Ce code l'oblige à fonctionner en conséquence. :)

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

il semble que tout fonctionne pour moi, peut-être essayer de remplacer vos fichiers bootstrap avec une nouvelle copie au cas où vous avez accidentellement tout gâché là-dedans. Ou si cela ne fonctionne pas, assurez-vous que vous importez tout. Êtes-vous sûr d'importer tous les fichiers CSS et JS?

quand vous cliquez sur la liste déroulante, il ajoute la classe open à votre <li class="dropdown"> vous donnant: <li class="dropdown open"> . Lorsque vous cliquez sur un lien dans le menu déroulant ou sur l'élément de Menu 2 (menu déroulant), la classe open est supprimée, ce qui provoque un nouveau repli du menu déroulant.

le violon ci-dessous montre comment arrêter l'événement de clic de propager, mais peut causer des problèmes ailleurs où. En outre, j'ai seulement empêché la propagation sur l'article #1 dans le dropdown. Vous pouvez utiliser jQuery pour que cela se produise sur tous les articles de la liste déroulante.

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

ce correctif est pour Bootstrap 2.3.2, et il est basé sur la réponse de @asbanks ( https://stackoverflow.com/a/18107103/437019 ).

en plus de la réponse d'asbanks, ce script propage aussi les appels JS à partir des liens à l'intérieur des dropdowns, et un dropdown ouvert ferme les autres.

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

j'utilise bootstrap-3.3.1 et je rencontre le même problème avec une application Android phonegap.

j'ai trouvé une solution drôle après plusieurs essais et erreurs:

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

jquery-1.11.2, bootstrap - 3.3.2:

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

je pense que si vous faites ce qui suit, les liens fonctionneront correctement

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

                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');

            });
        });

ajout de role="button" à <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> travaillé pour moi

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