次のコードを使用して、ユーザーがボタン (img) をクリックした後にドロップダウン セクション (ul li's) を作成しています。
jQuery(document).ready(function() {
jQuery(".buttonMenu").click(function (e) {
jQuery(".slideDownMenu").slideToggle();
e.stopPropagation();
});
jQuery(document).click(function() {
jQuery(".slideDownMenu").hide();
});
});
HTML:
<div class="slideDownMenu">
<ul class="menu">
<li><a onClick="goToByScroll('home');">Home</a></li>
<li><a onClick="goToByScroll('gallery');">Gallery</a></li>
<li><a onClick="goToByScroll('team');">Team</a></li>
<li><a onClick="goToByScroll('contact');">Contact</a></li>
</ul><!-- menu -->
</div> <!-- slideDownMenu -->
<span class="buttonMenu"></span>
ボタンをクリックして、非表示のセクションを表示し、リスト項目をクリックして、同じページのアンカー リンクに移動することができます。リンクをクリックまたはタップするとセクションが非表示になりますが、iPhone では、 img/button をもう一度クリックしても、何もしません。ページをその位置からスクロールしてから魔法をかける必要があります。img/button は再びクリック可能になります。
なぜこれが起こっているのですか? どうすれば修正できますか?
iPhone/iPadでのみ発生します。Chrome では、iPhone をユーザー エージェントとして使用しても問題ありません。また、コンソールにエラーはありません。