質問

次のコードには、呼ばれるメニューが表示されます #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ホバークラスを削除する(モバイルサイトバージョンには必要ありません)これを修正しました。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top