bootstrap 3 accordéon effondrement ne fonctionne pas sur iphone

Ces "accordéon sous-menus" travaux en chrome et firefox, mais pas sur un iphone.

J'ai construit un site qui comprend un "offcanvas" menu de navigation sur les petits écrans. L'utilisateur clique sur "hot dog bouton", et le menu de navigation des diapositives sur l'écran de gauche à droite... qui fonctionne très bien jusqu'à présent.

Certains des éléments de navigation contiennent des sous-menus. Pour ceux-ci, j'ai utilisé bootstrap accordéon de balisage. L'utilisateur clique sur une flèche, et le "sous-menu" se développe.

bootstrap 3 accordéon effondrement ne fonctionne pas sur iphone

Le Problème

Je développe à l'aide de chrome sur linux. Ce mécanisme fonctionne parfaitement dans chrome, firefox, et chaque navigateur je peux obtenir mes mains sur, ainsi que sur mon téléphone android. Il travaille également sur responsinator.com. Cependant, puisque je n'ai pas Safari, ni un iPhone, je n'ai pas pu tester cette fonctionnalité directement sur un iphone. Je suis en train de travailler sur l'obtention d'un émulateur iPhone...

Jusqu'alors, certains autres ont regardé ça sur un iPhone, et je me suis dit que le "sous-menus" ne fonctionnent pas du tout. Lorsque l'utilisateur clique sur la flèche, rien ne se passe...

Voici un extrait d'un "élément de menu" contenant un "sous-menu": veuillez noter que je suis en utilisant le "data-toggle' et 'data-target' attributs:

<div class="panel panel-default">
    <!-- The "Trigger" -->
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="view.php?cms_nav_id=1" name="about">
                About</a>
            <a data-toggle="collapse" data-target="#collapse1">
                <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
            </a>
        </h4>
    </div>

    <!-- Populated submenus: -->
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <a href="view.php?cms_nav_id=7" name="ohioimprovementprocess">Ohio Improvement Process</a>
        </div>
        <div class="panel-body">
            <a href="view.php?cms_nav_id=8" name="org/orgbeliefs">Organization Beliefs</a>  
        </div>
    </div>

</div><!-- /.panel -->

Je ne sais vraiment pas ce à essayer ensuite: questions Similaires ont terminé avec "un css conflit" ou iphone problèmes concernant .click(), mais je ne dis pas que: je suis en utilisant data-toggle/data-target. J'envisage l'abandon de la "data-target' balisage en faveur de l'manuellement par l'invocation d'une on('click', ... ) événement, mais je préfère ne pas...

Par la voie, j'appelle cela au bas de ma page si c'est pertinent:

<script src="/assets/dist/js/bootstrap.min.js"></script>

Qui est 'bootstrap.js v3.0.0' .

Quelqu'un at-il d'autres indices? Toute récente expérience directe avec un problème de ce genre?

Merci d'avance pour votre aide.

  • Est-il un moyen de le faire sans le <a> tag? Je veux les utilisateurs à cliquer n'importe où sur la panel-heading.
InformationsquelleAutor Ryan | 2013-11-08
  1. 77

    Donc je pense que j'ai compris cela: mon balisage original basés uniquement sur les données de la cible de l'élément, mais ce n'est apparemment pas assez. Safari (sur iPhone) semble également besoin de l'attribut href (qui devrait vraiment être là, sur un <a> de toute façon. Donc cela fonctionne:

    <a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>

    Mais ce n'est pas:

    <a data-toggle="collapse" data-target="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
    • En fait liés à des onglets plutôt que de menus, mais c'était exactement le problème que j'ai avec un appareil IOS. Nice one pour le travail et merci!
    • Vous devriez probablement accepter cette réponse correcte. Merci pour la résolution de ce et de poster!
    • safari est le plus non standard non pris en charge...hrg
    • Sinon, j'ai trouvé que la mise style="cursor: pointer;" à l'élément fonctionne également. Utile si vous n'êtes pas à l'aide d'une balise d'ancrage!
    • Pour éviter de sauter partout en cliquant dessus, ajouter onclick="return false;" à la <a> élément.
    • Je ne peux pas croire que le style="curseur: pointeur;" solution est la seule qui fonctionne pour moi. WTF! :D. Thx @Loris

    InformationsquelleAutor Ryan
  2. 29

    Pour moi, l'effondrement serait de travailler sur le bureau et l'iphone, mais certains de mes effondrements ont pas de travail sur les ipads. Il s'est avéré que parfait pour moi, la solution a été donnée par @Loris dans @Ryan réponse, ajouter le pointeur de style à n'importe quelle rétractables de déclenchement (par exemple, un div agissant comme un bouton). J'ai généralisé cette pour le code CSS suivant:

    [data-toggle~="collapse"] {
    cursor: pointer;
}
    • Vous venez d'enregistrer un mec de la vie. Je vous remercie.
    • Haha mon plaisir. Qui a donné à mes utilisateurs de la difficulté pour un certain temps. J'ai dû emprunter à un ami du pad.
    • Cela a fonctionné un régal pour bootstrap 4 accordéon. Je n'ai pas utilisé un bouton à l'intérieur de la carte d'en-tête et a juste eu le data-toggle sur la div.
    • Mec! Votre solution est super simple et sauvé quelques heures de codage/de trouver une solution. Ce doit être marqué comme meilleure réponse. Je vous remercie.
    • D'accord. Ryan réponse n'a pas fonctionné pour moi sur le dernier ipad, mais cela fonctionne très bien sur ipad et iphone et est facile à implémenter.
    InformationsquelleAutor John Lehmann
  3. 7

    en regardant cela, j'ai eu le même problème, cependant, lorsque vous ajoutez un href="#collapse1", il saute dans le haut de la page. J'ai fixé ce, en l'enveloppant d'un élément dans un bouton et enlevé le css pour les boutons. Donc, votre code devrait être:

    <button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>

    Espère que cette aide.

    • J'ai essayé d'utiliser un DIV avec data-toggle="collapse", mais il ne fonctionnait pas dans iOS Chrome. Travaillé régulièrement en Chrome sur mon ordinateur. La modification de la DIV à un <button> et en enlevant tous les bouton par défaut le style a fait le tour. Merci!
    • Ce doit être la accepté de répondre, car il ne nécessite pas l'ajout d'un href, ce qui provoque l'écran pour sauter lorsqu'un utilisateur ouvre/ferme un panneau.
    InformationsquelleAutor HanSoloShotFirst
  4. 5

    C'est de travailler pour moi : 

    $('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});
    • Les évènements touchstart sauver ma journée Merci
    • A travaillé pour moi. Merci!!!!
    InformationsquelleAutor gem007bd
  5. 5

    Vous pouvez résoudre ce problème en ajoutant simplement cet attribut à l'élément div qui déclenche la liste déroulante.

    cursor: pointer;
    • Cela a fonctionné pour moi ciblage safari sur iOS.
    InformationsquelleAutor Bodhidharma
  6. 3

    Pour faire ce travail pour n'importe quel type d'élément, tel qu'un div, vous pouvez utiliser la méthode jQuery (testé ios 8):

    <div class="collapse-header" data-target="#collapse_0">
    Click this element...
</div>
<div id="collapse_0">
    ...to collapse this element.
</div>

<script>
    $('.collapse-header').on('click', function () {
        $($(this).data('target')).collapse('toggle');
    });
</script>
    InformationsquelleAutor Turnip
  7. 2

    pour de plus amples référence:

    Je l'ai fait dans mon application:

    a[data-toggle="collapse"]{
  cursor:pointer;
}

    Et il a résolu le problème.

    Dans le MDN documentation dit ceci:

    "Safari Mobile 7.0+ (et probablement les versions antérieures trop) souffre d'un bug où les événements de clic n'a pas tiré sur des éléments qui ne sont généralement pas interactif (par exemple ) et qui n'ont pas les écouteurs d'événement directement rattachées aux éléments eux-mêmes (c'est à dire de l'événement délégation est utilisé). Voir ce live exemple pour une démonstration. Voir aussi Safari docs sur la réalisation des éléments cliquables et la définition de "cliquable " élément"

    Références:

    InformationsquelleAutor Jorge Vargas