L'effondrement de l'accordéon bootstrap 3 ne fonctionne pas sur l'iphone

Ces "sous-menus d'accordéon" fonctionnent dans Chrome et Firefox, mais pas sur un iphone.

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

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

Entrez la description de l'image ici

Le problème

Je développe en utilisant chrome sur linux. Ce mécanisme fonctionne parfaitement dans Chrome, Firefox et tous les navigateurs que je peux mettre en main, ainsi que sur mon téléphone Android personnel. Il fonctionne é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 travaille pour obtenir un émulateur d'iPhone …

Jusque-là, d'autres personnes ont examiné cela sur un iPhone, et on m'a dit que les "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": notez que j'utilise les attributs 'data-toggle' et 'data-target'

<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 quoi essayer ensuite: des questions semblables se sont terminées par "un conflit css" ou des problèmes d'iphone concernant .click() , mais je ne l'utilise pas: j'utilise data-toggle/data-target . Je envisage d'abandonner le balisage de «cible de données» en faveur de l'appel manuelle d'un événement on('click', ... ) , mais je préfère ne pas …

En passant, je l'appelle au bas de ma page si cela est pertinent:

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

Quelle est 'bootstrap.js v3.0.0'.

Quelqu'un at-il d'autres indices? Toute expérience directe récente d'un problème comme celui-ci?

Merci d'avance pour votre aide.

Je pense donc que je l'ai compris: mon marquage d'origine reposait uniquement sur l'élément cible de données, mais ce n'est apparemment pas suffisant. Safari (sur iPhone) semble également avoir besoin de l'attribut href (qui devrait vraiment être sur un <a> 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 le cas:

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

En regardant cela, j'ai eu le même problème, cependant, lorsque vous ajoutez un href = "# collapse1", il vous ramène au haut de la page. Je l'ai corrigé en enveloppant l'élément dans un bouton et j'ai supprimé le css pour les boutons. Donc, votre code serait:

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

J'espère que cela t'aides.

Pour que cela fonctionne pour n'importe quel type d'élément, comme un div , vous pouvez utiliser la méthode jQuery suivante (iOS testé 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>

Cela fonctionne pour moi:

 $('.divClassName').on('click touchstart', function () { $($(this).data('target')).collapse('toggle'); });

Pour moi, l'effondrement fonctionnerait sur le bureau et l'iphone, mais certains de mes collapsus ne fonctionnaient pas sur ipads. Il s'est avéré que la solution parfaite pour moi a été donnée par @Loris dans la réponse de @ Ryan, pour ajouter le style de pointeur à n'importe quel déclencheur pliable (par exemple, un div agissant comme un bouton). J'ai généralisé ceci au CSS suivant:

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

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

 cursor: pointer;