レスポンシブ Web サイトを開発しており、小さな画面でタブからアコーディオンに変わるタブがいくつかあります。現時点で私がやっている方法は次のとおりです。
var myGlobalVariable = {};
$(window).resize(function(e) {
duringResize();
myGlobalVariable.windowWidth = window.innerWidth;
});
function widthHasChanged() {
return window.innerWidth !== myGlobalVariable.windowWidth;
}
function duringResize() {
if(widthHasChanged()) {
if(Modernizr.mq('all and (min-width:1000px)')) {
/* Do stuff for tabs */
} else {
/* Do stuff for accordion */
}
}
}
幅が変更されたかどうかを確認するために、グローバル変数を使用してブラウザー ウィンドウの最後の幅を保存する必要があるため、これには満足していません。
これを行う必要がある理由は、タブがアコーディオン モードのときにモバイルでクリックすると、タブのコンテンツに対応するためにドキュメントが実際に高くなるためです。何らかの理由で、「ウィンドウ」がモバイルで同じサイズであっても、これはサイズ変更として分類されます。これは、幅が変更されていない場合でもタブ/アコーディオン コードが呼び出されていたことを意味し、これが混乱を招いていました。
私が見逃しているものはありますか、それともこれを達成する唯一の方法ですか? jQuery およびバニラ JavaScript ソリューションは大歓迎です。