次のコードは、列を左から右にスライドさせ、列の右側にあるすべてのものを右に動かしてから元に戻します (Facebook アプリに少し似ています)。ドキュメントの準備ができている場合は正常に機能しますが、サイズ変更時には機能しません。サイズを変更すると、奇妙な動作を開始します。前の機能を実行し、サイズ変更時に新しい機能を登録しないかのようです。
function doMenu() {
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
var width = $(window).width();
if ((width < 870) && (width > 750)) {
var status = 'closed';
$('.icon-list').on('click', function(event){
if ( status === 'closed' ){
$menu.animate({
width: 0,
marginLeft: -200,
display: 'toggle'
}, 'fast');
$(".content_right, .navbar").animate({
marginRight: 0,
display: 'toggle'
}, 'fast');
return status = 'open';
} else if ( status === 'open' ) {
$menu.animate({
width: 200,
marginLeft: 0,
display: 'toggle'
}, 'fast');
$(".content_right, .navbar").animate({
marginRight: -120,
display: 'toggle'
}, 'fast');
return status = 'closed';
}
});
}
if (width < 750) {
var status = 'closed';
$('.icon-list').on('click', function(event){
if ( status === 'closed' ){
$menu.animate({
width: 0,
marginLeft: -200,
display: 'toggle'
}, 'fast');
$(".content_right, .navbar").animate({
marginLeft: 0,
display: 'toggle'
}, 'fast');
return status = 'open';
} else if ( status === 'open' ) {
$menu.animate({
width: 200,
marginLeft: 0,
display: 'toggle'
}, 'fast');
$(".content_right, .navbar").animate({
marginLeft: 200,
display: 'toggle'
}, 'fast');
return status = 'closed';
}
});
}
}
$(document).ready(doMenu);
$(window).resize(doMenu);
編集- 以下に示すように toggle() を on('click', function(event) に変更しましたが、サイズ変更時に関数が正しく機能しないという同じ問題がまだあります。