画面幅によって処理分けしているヘッダーメニューを画面リサイズ後も動作させたい

Question

###前提・実現したいこと
jQueryで、画面幅によって処理分けしているヘッダーメニューがあります。
1025px以上でドロップダウン型、かつスクロール時に縮小版ヘッダーに切り替えます。
1024px以下でドロワー型、縮小版ヘッダーを表示します。

###発生している問題・エラーメッセージ

画面をリサイズして1024pxをまたいだとき、不具合が生じます。
（ページ読み込み時の画面幅の処理のまま変わらない）

###該当のソースコード

if ($(window).width() > 1024) {
    $('#main_header_nav li, #lower_header_nav li').hover(function() {
        $('>ul', this).stop(true, true).slideDown('fast');
    }, function() {
        $('>ul', this).stop(true, true).slideUp('fast');
    });
}

$('#sp_menu_open, #sp_menu_close').click(function() {
    $('#lower_header_nav').animate({ width: 'toggle' });
});

if ($(window).width() > 1024) {
    changeHeader();
    $(window).scroll(changeHeader);
}

function changeHeader() {
    var headerChangeHeight = 200; // 切り替わるタイミング
    if ($(window).scrollTop() >= headerChangeHeight) {
        $('#lower_header').slideDown('fast');
    } else {
        $('#lower_header').slideUp('fast');
    }
}

###試したこと
resizeを使って以下の通り書きかえました。

dropDownMenu();
$(window).resize(dropDownMenu);

function dropDownMenu() {
    if ($(window).width() > 1024) {
        $('#main_header_nav li, #lower_header_nav li').hover(function() {
            $('>ul', this).stop(true, true).slideDown('fast');
        }, function() {
            $('>ul', this).stop(true, true).slideUp('fast');
        });
    }
}

drawerMenu();
$(window).resize(drawerMenu);

function drawerMenu() {
    if ($(window).width() <= 1024) {
        $('#sp_menu_open, #sp_menu_close').click(function() {
            $('#lower_header_nav').animate({ width: 'toggle' });
        });
    }
}

changeHeader();
$(window).scroll(changeHeader);

function changeHeader() {
    if ($(window).width() > 1024) {
        var headerChangeHeight = 200; // 切り替わるタイミング
        if ($(window).scrollTop() >= headerChangeHeight) {
            $('#lower_header').slideDown('fast');
        } else {
            $('#lower_header').slideUp('fast');
        }
    }
}

ですが、思うような結果が得られません。

1024px以下にリサイズすると、#lower_headerが表示されません。
1025px以上にリサイズすると、#lower_header_navが表示されません。
また、発生条件がわからないのですが、1024px以下にリサイズした後、ドロップダウンしてしまうことがあります。
また同様に、1025px以上にリサイズした後、ドロップダウンが一瞬になる（スライドしない）ことがあります。

調べたり試したり、思いつく限りのことをしましたが、自力では解決できませんでした。
だいぶ混乱しており恐縮ですが、どなたかご教示いただければ幸いです。
よろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
Google CDN jQuery 3.1.0 を利用しています。
回答を得やすくするため、他サイトでも同様の質問をしています。

Answer 1

こんな感じでどうでしょう。

$('#main_header_nav li, #lower_header_nav li').hover(function() {
	if ($(window).width() > 1024) {
		$('>ul', this).stop(true, true).slideDown('fast');
	} else {
		$('>ul', this).stop(true, true).slideDown('fast'); // とりあえず表示させています。
	}
}, function() {
	if ($(window).width() > 1024) {
		$('>ul', this).stop(true, true).slideUp('fast');
	} else {
		$('>ul', this).stop(true, true).slideDown('fast'); // とりあえず表示させています。
	}
});

$('#sp_menu_open, #sp_menu_close').click(function() {
	$('#lower_header_nav').animate({ width: 'toggle' });
});

changeHeader();
$(window).scroll(changeHeader);

function changeHeader() {
	if ($(window).width() > 1024) {
		var headerChangeHeight = 200; // 切り替わるタイミング
		if ($(window).scrollTop() >= headerChangeHeight) {
			$('#lower_header').slideDown('fast');
		} else {
			$('#lower_header').slideUp('fast');
		}
	} else {
		$('#lower_header').slideDown('fast'); // とりあえず表示させています。
	}
}

Comments

[nilgiri]

早速の回答ありがとうございます！
いただいたコードを試してみたところ、不具合が起こる条件がかなり限定的になってきました。

●1024px以下で#lower_header_navを一度表示し、再び非表示にした状態で、1025px以上にリサイズ
→ #lower_header_navが表示されない

●1025px以上で#lower_headerを一度表示し、再び非表示にした状態で、1024px以下にリサイズ
→ #lower_headerが表示されない

コードを読んで、確かにそうなるかも、というところまでは理解できたのですが、解決する方法がわからず…
もしよろしければヒントなどご教示いただけないでしょうか。

[kei344]

「どの場合にどうするか」を質問文から正しく追っているわけではない ＆ HTMLが提示されていないので、ちょっとわかりません。

イベントが発生する段階で必要な要素を表示し、必要でない要素を非表示にするなどする必要があると思います。
ひとまずリサイズイベント時に changeHeader(); は必要そうですね。

[nilgiri]

遅くなりました。
アドバイスありがとうございます！
「イベントが発生する段階で必要なものを表示、そうでないものは非表示」というところに注目して、もう一度じっくり見直してみます。
解決次第、ベストアンサー等の対応をさせていただきます。

Answer 2

質問者です。
下記のコードで解決しました！

// メニューにホバーしたとき
$('#main_header_nav li, #lower_header_nav li').hover(function() {
	// カーソルがのったら開く
	$('>ul', this).stop(true, true).slideDown('fast');
}, function() {
	// カーソルが外れたら、PCでは閉じ、タブレット・スマホでは開いたまま
	if ($(window).width() > 1024) {
		$('>ul', this).stop(true, true).slideUp('fast');
	} else {
		$('>ul', this).stop(true, true).slideDown(0);
	}
});

// ハンバーガーボタン・閉じるボタンをタップしたとき
$('#sp_menu_open, #sp_menu_close').click(function() {
	$('#lower_header_nav').animate({ width: 'toggle' });
});

// 画面をリサイズしたとき
$(window).resize(function() {
	showLowerHeader(); // #lower_header の表示/非表示
	if ($(window).width() > 1024) {
		// PCの場合
		// #lower_header_nav を表示
		$('#lower_header_nav').animate({ width: 'show' }, 0);
		// 上記だけだと display:block になってしまうので、本来の値を再指定
		$('#lower_header_nav').css({ display: 'inline-block' });
		// 子メニューを非表示 （ホバーで表示）
		$('#main_header_nav li > ul, #lower_header_nav li > ul').slideUp(0);
	} else {
		// タブレット・スマホの場合
		// #lower_header_nav を非表示 （ハンバーガーボタンタップで表示）
		$('#lower_header_nav').animate({ width: 'hide' }, 0);
		// 子メニューを表示
		$('#main_header_nav li > ul, #lower_header_nav li > ul').slideDown(0);
	}
});

// ページを読み込んだとき
showLowerHeader();

// スクロールしたとき
$(window).scroll(showLowerHeader);

// PCのみ、スクロール量に応じて #lower_header を表示/非表示
function showLowerHeader() {
	if ($(window).width() > 1024) {
		var h = 200; // 切り替わるタイミング
		if ($(window).scrollTop() >= h) {
			$('#lower_header').slideDown('fast');
		} else {
			$('#lower_header').slideUp('fast');
		}
	} else {
		$('#lower_header').slideDown(0);
	}
}

ポイントは下記の三点でした。

1. イベントハンドラを1回だけ登録するよう記述する（resizeの中にclickやhoverを書かない）
2. ifの分岐は各イベントハンドラ内に記述する
3. 操作対象の要素を条件ごとに確実に表示・非表示する

kei344さん、的確なコードとアドバイスをいただき本当にありがとうございます！