web-dev-qa-db-fra.com

Bootstrap 3 La liste déroulante sur iPad ne fonctionne pas

J'ai une simple liste déroulante Bootstrap 3 qui fonctionne dans tous les navigateurs que j'ai testés (Chrome, FF, IE, Chrome sur Android) mais c'est ne fonctionne pas dans Safari ou Chrome sur l'iPad (ios 7.04).

Je pensais que c'était un problème avec l'ontouchstart comme suggéré dans d'autres articles traitant de Bootstrap 2 mais j'ai essayé cela avec un fichier local et je n'ai pas réussi: Bootstrap Collapsed Les liens du menu ne fonctionnent pas sur les appareils mobiles

Je ne veux pas non plus de solution où je dois modifier le fichier javascript d'origine, car nous tirons actuellement cela d'un CDN.

J'ai créé un simple extrait ici pour tester: https://www.bootply.com/Bdzlt3G36C

Voici le code original qui est dans le bootply au cas où ce lien mourrait à l'avenir:

<div class="col-sm-5 col-offset-2 top-buffer">
  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">
        Action
    </a>
    <ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">
      <li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>
        Action
    </a>
    <ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">
        </a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>

  </ul></div>
</div>
javascriptioscsstwitter-bootstrap-3
29
JeffR

Je l'ai compris. Il me manquait le href = "#" dans ma balise d'ancrage. Cela fonctionnait bien dans d'autres navigateurs mais pas chrome ou safari sur IOS. Fonctionne très bien maintenant. Voici le code final pour toute personne intéressée:

  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
        Action
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>
    </ul>
  </div>

Et un exemple de travail ici: http://www.bootply.com/104147

70
JeffR

Si vous ne souhaitez pas utiliser un <a> tag, ou ajoutez un attribut href redondant, vous pouvez simplement appliquer cursor:pointer css à l'élément, et cela fonctionnera

24
Mark Beech

les versions de safari que nous avons testées sur iOS n'interprètent pas correctement le z-index initial correctement. Augmentez l'index z dans le menu déroulant. Au lieu de cliquer sur l'élément, il est masqué et le menu se ferme. Pour que Safari fonctionne, nous devions remplacer bootstrap z-index: initial.

.dropdown-menu {
  z-index: 25000 !important;
}
6
Joseph Olstad

Vous pouvez également ajouter une classe à votre balise appelée cliquable. Il s'agit d'une classe bootstrap. Elle définit le curseur css: pointeur.

<a class="clickable"></a>
2
hitgirl1221

Je viens d'avoir ce problème - où le menu déroulant Bootstrap 3 navbar ne s'ouvrait pas sur un iPad mini 2 (mais fonctionnait sur un iPhone 7 et divers ordinateurs de bureau/portables). Après le débogage directement sur l'iPad , J'ai découvert que le problème était d'utiliser 'let' au lieu de 'var' dans une fonction js. Une fois que j'ai changé les 'let to' var's, tout allait bien. Je voulais juste ajouter ceci ici au cas où (ou supprimer un similaire fonction obsolète) s'avère être un correctif pour quelqu'un d'autre aussi!

1
murph

la bascule cible bootstrap ne fonctionnait pas pour moi sur iPhone/iPad WebKit. J'ai fini par basculer la classe d'affichage manuellement lorsque j'ai cliqué sur le conteneur déroulant

  $scope.showDropdown = function(dropdownManuId) {
    var element = document.getElementById(dropdownManuId);
    if( element.classList.contains("show") ) {
      element.classList.remove("show");
    } else {
      element.classList.add("show");
      element.focus();
      element.scrollIntoView();
    }
  };
0
Delorean