Bootstrap v2 Dropdown Navigation ne fonctionne pas sur les navigateurs mobiles

j'ai un problème avec les menus déroulants de Bootstrap sur les appareils mobiles (Bootstrap 2). Une question similaire a été posée ici avec des boutons dropdown, cependant la réponse pour cela était un bug inhérent dans bootstrap qui a été résolu dans une mise à jour. Je semble avoir le même problème alors peut-être que c'est à mon balisage?

j'ai un navbar repliable avec des chutes et tout fonctionne parfaitement sur les navigateurs de bureau. Toutefois sur un mobile, les dropdowns s'ouvriront lorsque vous cliquerez sur le dropdown, mais en cliquant sur un lien dropdown, vous ne ferez que replier le dropdown à nouveau - les liens ne peuvent pas être atteints. J'ai essayé différentes versions de bootstrap et je ne peux pas corriger cela donc je ne peux qu'imaginer que c'est mon markup. 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 reproduisant le code (désolé, ne peut pas envoyer le site): http://jsfiddle.net/yDjw8/1 /

(Problème ne peut être vu/répliqué sur mobile - je suis en utilisant iOS)

toute aide serait très appréciée.

29
demandé sur Community 2013-06-19 00:47:07

14 réponses

dans votre bootstrap miniaturisé.min.fichier js, trouver le substrat

"ontouchstart"

et le remplacer par

"disable-ontouchstart"

Regardez cette question similaire: Bootstrap s'est Effondré Liens du Menu ne fonctionne Pas sur les Appareils Mobiles

58
répondu Jollyra 2017-05-23 12:34:30

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.

12
répondu asbanks 2017-02-26 03:50:13

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);
});
9
répondu icemelon 2014-03-11 06:52:24

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! :)

4
répondu Massa 2014-01-08 14:05:37

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!!!

4
répondu Jigar Trivedi 2015-07-10 08:08:44

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.

3
répondu Duncan Micahel-MacGregor 2014-03-28 16:14:10

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");
        });
    });
2
répondu Kathryn 2016-04-20 18:01:10

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?

1
répondu 2013-06-18 21:50:53

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/

1
répondu Michael Freake 2013-06-19 20:17:24

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");
  }
});
1
répondu Yossi Shasho 2017-05-23 10:31:26

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');
1
répondu Miao ZhiCheng 2015-01-03 23:42:22

jquery-1.11.2, bootstrap - 3.3.2:

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});
0
répondu Ferry 2015-02-15 20:52:38

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>');

            });
        });
0
répondu Edward Okech 2016-03-08 04:55:59

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>

0
répondu David DiBenedetto 2017-01-19 06:36:18