0

CSS を使用して、特定のブレーク ポイントで要素を表示および非表示にします。また、jquery トグルを使用して要素を表示/非表示にします。ブラウザーのサイズをモバイル サイズに変更すると、すべてが機能しますが、ブラウザーのサイズを変更して大きくすると、Jquery を使用して非表示にした要素が非表示になり、Web ページにギャップが残ります。ウィンドウのサイズ変更や向きの変更時に、元の状態にリセットする簡単な方法が必要です。

たとえば、タブレットまたはモバイル用の CSS で非表示にするメニュー div があり、メニューの代わりに CSS を使用してメニュー アイコンを表示します。次に、Jquery を使用して、アイコンが選択されたときにメニューを表示/非表示にします。ブラウザを大きくしたり、モバイルまたはタブレットの向きを横向きに変更したりした場合、ユーザーがアイコンを使用してメニューを非表示にすると、メニューが表示されません。どうすればこれを修正できますか?

4

1 に答える 1

1

私も同じ問題を抱えています。これは私のソリューションの非常に単純化されたバージョンです:

$(window).on('resize',function(){
    if($(this).width() > 800){
        $('#Menu').removeAttr('style');
    }
});

または、メニューが表示される幅が何であれ。これにより、ボタンを押すことで jQuery が挿入した「表示/非表示」インライン CSS が削除されます。

私のソリューションにはより多くのコンポーネントが含まれていると言えます...関数内にあり、ハンドラーがモバイルバージョンに100万回適用されていることに気付きまし.on()た。ただし、コア コンポーネントは、jQuery がメニューに与える style 属性を削除することです。これにより、指定した CSS がオーバーライドされなくなります。.off().on('click')

于 2013-03-29T18:36:39.147 に答える