Bootstrap v2 Dropdown Navigation ne fonctionne pas sur les navigateurs mobiles
J'ai un problème avec le menu déroulant Bootstrap sur les appareils mobiles (Bootstrap 2). Une question similaire a été posée ici avec des boutons déroulants, mais la réponse a été un bogue inhérent à bootstrap qui a été résolu dans une mise à jour. Il semble que j'ai le même problème alors peut-être que c'est à cause de mon balisage?
J'ai une barre de navigation pliable avec des listes déroulantes et tout fonctionne parfaitement sur les navigateurs de bureau. Cependant, sur un mobile, les listes déroulantes s'ouvriront lorsque vous cliquerez sur la liste déroulante, mais en cliquant sur des liens de liste déroulante, vous replierez simplement la liste déroulante - les liens ne peuvent pas être atteints. J'ai essayé différentes versions de bootstrap et je ne peux pas corriger cela, donc je peux seulement imaginer que c'est mon balisage. Le voici:
<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>
Voici un exemple répliquant le code (désolé, impossible d'envoyer le site): http://jsfiddle.net/yDjw8/1/
(Le problème ne peut être vu/reproduit que sur mobile - j'utilise iOS)
Toute aide serait très appréciée.
Dans votre fichier bootstrap.min.js minifié, recherchez la sous-chaîne
"ontouchstart"
et remplacez-le par
"disable-ontouchstart"
Découvrez cette similaire SO question: les liens du menu Bootstrap Collapsed ne fonctionnent pas sur les appareils mobiles
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 distincts que j'ai construits.
J'utilise BootStrap 3.1.1. J'ai essayé de nombreuses réponses, le menu déroulant fonctionne bien sur les appareils Android mais ne fonctionne toujours pas sur les appareils iOS. Enfin Je trouve la cause profonde du problème.
safari sur iPhone ne prend en charge que les événements de clic pour <a> et <input> élément . Voir ce passage Cliquez sur délégation d'événement sur l'iPhone .
Nous devons donc ajouter une délégation de clic personnalisée. Le code suivant 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 réduite.
2. Recherchez les lignes ou les emplacements pour: touchstart.dropdown.data-api
3.Il ne devrait y en avoir que 4. Quelque chose comme ça:
.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 2e et 3e occurrences:
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
4.Votre article de code doit ressembler à 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 minifiées de Bootstrap.js ... vous devez donc concaténer la nouvelle ligne à la position exacte sur celle-ci.
Bonne chance! :)
Je recommande de télécharger les derniers fichiers Bootstrap et de remplacer les fichiers bootstrap.js et bootstrap.min.js sur votre serveur par les nouvelles versions.
Cela a résolu le problème pour moi.
J'ai trouvé une solution à cela depuis bootstrap forum git-hub. Vous devez inclure une seule ligne de code dans le script sur le document prêt comme,
$ ('body'). on ('touchstart.dropdown', '.dropdown-menu', fonction (e) {e.stopPropagation ();});
Son travail pour moi !!!
Cela semble fonctionner sans aucun problème. La classe "open" existe déjà avec bootstrap et devrait fonctionner, mais pour une raison inconnue. Ce code l'oblige à s'exécuter en conséquence. :)
jQuery(document).ready(function($) {
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});
});
Ce correctif est pour Bootstrap 2.3.2, et son basé sur la réponse de @asbanks ( https://stackoverflow.com/a/18107103/437019 ).
En plus de la réponse de asbanks, ce script propage également les appels JS à partir des liens à l'intérieur des listes déroulantes, et une liste déroulante fermée ferme les autres ouvertes.
$(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");
}
});
Lorsque vous cliquez sur le menu déroulant, il ajoute la classe open à votre <li class="dropdown"> te donner: <li class="dropdown open">. Lorsque vous cliquez sur un lien dans le menu déroulant ou sur "l'élément de menu 2 (liste déroulante)", la classe open est supprimée et le menu déroulant se replie à nouveau.
Le violon ci-dessous montre comment arrêter la propagation de l'événement click, mais peut vous poser des problèmes ailleurs. De plus, j'ai seulement empêché la propagation sur l'élément n ° 1 dans la liste déroulante. Vous pouvez utiliser jQuery pour que cela se produise sur tous les éléments de la liste déroulante.
JS Fiddle: http://jsfiddle.net/yDjw8/2/
J'utilise bootstrap-3.3.1 et je rencontre le même problème dans une application phonegap Android Android.
J'ai trouvé une solution de contournement amusante après plusieurs essais et erreurs:
// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');
On dirait que tout fonctionne pour moi, essayez peut-être de remplacer vos fichiers bootstrap par une nouvelle copie au cas où vous auriez accidentellement gâché quoi que ce soit 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?
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>');
});
});
l'ajout de role="button" à <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> a fonctionné pour moi
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>