web-dev-qa-db-fra.com

bootstrap 3 réduction de l'accordéon ne fonctionne pas sur l'iphone

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

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

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

enter image description here

Le problème

Je développe en utilisant chrome sur Linux. Ce mécanisme fonctionne parfaitement en chrome, firefox et tous les navigateurs sur lesquels je peux mettre la main, ainsi que sur mon téléphone Android personnel. Cela fonctionne également sur responsinator.com . Cependant, comme je n’ai ni Safari, ni un iPhone, je n’ai pas pu tester cette fonctionnalité directement sur un iphone. Je travaille sur l'obtention d'un émulateur iPhone ...

Jusque-là, d'autres personnes ont examiné la question sur un iPhone et on m'a dit que les "sous-menus" ne fonctionnaient 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 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 faire ensuite. Des questions similaires ont abouti à un "conflit CSS" ou à des problèmes d’iPhone concernant .click(), mais je n’utilise pas cela: j’utilise data-toggle/data-target. J'envisage d'abandonner le balisage 'data-target' au lieu d'invoquer manuellement un événement on('click', ... ), mais je préférerais ne pas ...

En passant, j’appelle cela au bas de ma page si cela est pertinent:

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

Qui est 'bootstrap.js v3.0.0'.

Est-ce que quelqu'un a d'autres indices? Une expérience directe récente avec un problème comme celui-ci?

Merci d'avance pour votre aide.

javascriptjqueryioscsstwitter-bootstrap
32
Ryan

Je pense donc que j'ai compris cela: mon balisage initial reposait uniquement sur l'élément data-target, mais cela ne semble pas suffisant. Safari (sur iPhone) semble également avoir besoin de l'attribut href (qui devrait de toute façon être présent sur un <a>. Cela fonctionne donc:

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

Mais cela ne veut pas:

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

Pour moi, l'effondrement fonctionnerait sur un ordinateur de bureau et sur un iphone, mais certains de mes effondrements ne fonctionnaient pas sur des ipads. Il s'est avéré que la solution parfaite pour moi a été donnée par @Loris dans la réponse de @ Ryan, à savoir d'ajouter le style de pointeur à tout déclencheur pouvant être réduit (par exemple, une div agissant en tant que bouton). J'ai généralisé ceci au CSS suivant:

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

en regardant cela, j’ai eu le même problème, cependant, lorsque vous ajoutez un href = "# collapse1", vous vous retrouvez en haut de la page. J'ai résolu ce problème en enveloppant l'élément dans un bouton et en supprimant 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. 

7
HanSoloShotFirst

Vous pouvez résoudre ce problème en ajoutant simplement cet attribut à la div qui déclenche le menu déroulant.

cursor: pointer;
4
Joe Wong

Pour que cela fonctionne avec tout type d'élément, tel que div, vous pouvez utiliser la méthode jQuery suivante (testé dans 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>
3
Turnip

Cela fonctionne pour moi : 

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

pour référence ultérieure:

Je l'ai fait dans ma candidature:

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

Et cela a résolu le problème.

Dans la documentation MDN, ceci dit:

"Safari Mobile 7.0+ (et probablement les versions antérieures également) souffre d'un bogue dans lequel les événements de clic ne sont pas déclenchés sur des éléments qui ne sont pas généralement interactifs (par exemple) et pour lesquels aucun écouteur d'événement n'est directement lié aux éléments C'est-à-dire que la délégation d'événements est utilisée). Voir cet exemple en direct pour une démonstration. Voir aussi la documentation de Safari sur la création d'éléments cliquables et la définition de "élément cliquable" "

Références: 

0
Jorge Vargas