iPhoneのjquery toggleclassバグ
-
26-10-2019 - |
質問
次のコードには、呼ばれるメニューが表示されます #wrap-footer
クリックすると下にスライドさせます #menu-button
. 。メニューを除いて、ページ上のどこにでもクリックすると、スライドします。
メニューが表示されているとき #menu-button
「メニューオープン」(スタイリングに使用)と呼ばれるクラスが追加されています。メニューが再び非表示になると、クラスが削除されます。
注意してください、私はセレクターを使用しました #wrap-header
, #wrap-pre-footer
, #wrap-content
ただではなく html
また document
iPhoneはこれらを認識していないためです。
$(document).ready(function(){
$("#menu-button a").hide();
$('#menu-button').append('Menu');
$('#wrap-header,#wrap-pre-footer,#wrap-content').click(function() {
$('#wrap-footer').slideUp('slow');
$('#menu-button').removeClass('menu-open');
});
$('#menu-button').click(function(event){
event.stopPropagation();
$('#menu-button').toggleClass('menu-open');
$('#wrap-footer').slideToggle('slow');
});
$("#wrap-footer").click(function(e) {
e.stopPropagation();
});
});
デスクトップブラウザでは、すべてが問題ありません。ただし、iPhoneではSlideToggleは正常に機能しますが、Toggleclassはクラスを削除しません。したがって、メニューが開いている場合、ページをクリックします(ただしそうではありません #menu-button
また #wrap-footer
)メニューを最小化してクラスを削除しますが、クリックします #menu-button
メニューを最小化するだけで、クラスを削除しません。
ありがとう
解決
JSは大丈夫だったことがわかりました。本当の問題は、CSSホバークラスでした。 iPhoneで最後の要素をクリックすると、ホバー状態として持続します。 CSSホバークラスを削除する(モバイルサイトバージョンには必要ありません)これを修正しました。
所属していません StackOverflow