レスポンシブサイトのグローバルナビの挙動をPC・SPで変えたい

Question

前提・実現したいこと

お世話になります。よろしくお願い致します。
勉強不足の為、見当違いなご質問になっておりましたら、
ご指摘頂けますと幸いです。

レスポンシブサイトを作成しておりまして、
PCとSPでグローバルナビの動きを下記のように変えたいと思っております。

　■PCの場合
マウスオンでドロップダウンメニューが表示
マウスアウトでドロップダウンメニューが非表示

　■SPの場合
0. ハンバーガーボタンタップでスライドダウンで表示
0. 表示されたメニュー内テキストをさらにタップでPCの時にドロップダウンで
表示されたメニューがアコーディオンで表示
0. 工程「2」でタップした部分を再度タップでアコーディオン閉じる
0. ハンバーガーボタンタップでメニュー全体閉じる

　■PC・SP共通
ウィンドウサイズリサイズして、PCサイズからSPサイズや
SPサイズからPCサイズに変更された際にグローバルメニューは
初期状態に戻る

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

PC画面サイズまたは、SP用画面サイズでページを読み込んだ場合は、グローバルナビの挙動は問題ありませんが、ウィンドウサイズを変更した際に下記のような挙動になってしまいます。

　■PCサイズ→SPサイズ
- ハンバーガーボタンクリックでメニューが数回開閉を繰り返して、開く
- メニューを閉じる際も数回開閉を繰り返して閉じる
- 開いたメニュー内テキストにマウスオンでメニューが開いてしまう。

該当のソースコード

<header>
	<div>
		<div class="barger">
			<p>
				<span></span>
				<span></span>
				<span></span>
			</p>
		</div>

		<h1>サイト名が入ります。</h1>
		<nav>

			<ul>
				<li>大メニュー1
					<ul>
						<li><a href="#">大メニュー1の中1</a></li>
						<li><a href="#">大メニュー1の中2</a></li>
						<li><a href="#">大メニュー1の中3</a></li>
						<li><a href="#">大メニュー1の中4</a></li>
						<li><a href="#">大メニュー1の中5</a></li>
					</ul>
				</li>


			<li>大メニュー2
				<ul>
					<li><a href="#">大メニュー2の中1</a></li>
					<li><a href="#">大メニュー2の中2</a></li>
					<li><a href="#">大メニュー2の中3</a></li>
				</ul>
			</li>


			<li>大メニュー3
				<ul>
					<li><a href="#">大メニュー3の中1</a></li>
					<li><a href="#">大メニュー3の中2</a></li>
					<li><a href="#">大メニュー3の中3</a></li>
					<li><a href="#">大メニュー3の中4</a></li>
				</ul>
			</li>


			<li>大メニュー4
				<ul>
					<li><a href="#">大メニュー4の中1</a></li>
					<li><a href="#">大メニュー4の中2</a></li>
				</ul>
			</li>


			<li><a href="#">大メニュー5</a></li>

			</ul>


		</nav><!-- nav -->
	</div>
</header><!-- header -->

.barger {
	display: none;
}

header {
	width: 100%;
	background: #FFF;
}

header > div {
	max-width: 1120px;
	margin: 0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	padding: 40px 20px;
}

header h1 {
	font-size: 20px;
	font-weight: bold;
	width: 50%
}

header nav {
	width: 50%;
	
}

header nav > ul {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
}

header nav > ul > li {
	position: relative;
	font-size: 18px;
	cursor: pointer;
}

header nav > ul > li ul {
	background: rgba(237, 237, 232, 0.7);
    padding: 15px;
    position: absolute;
    left: 0;
    top: 20px;
    z-index: 100;
	display: none;
}

header nav > ul > li ul li {
	margin: 0 0 15px 0;
	font-size: 16px;
}

header nav > ul > li ul li:last-child {
	margin: 0;
}

header nav > ul > li:nth-of-type(1) ul {
	width: 305px;
}

header nav > ul > li:nth-of-type(2) ul {
	width: 190px;
}

header nav > ul > li:nth-of-type(3) ul {
	width: 190px;
}

header nav > ul > li:nth-of-type(4) ul {
	width: 140px;
}

header nav dd {
	font-size: 16px;
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 100;
	display: none;
}

@media screen and (max-width:700px) {

.barger {
    display: block;
    width: 40px;
    height: 30px;
    left: 5px;
    top: 12px;
    position: absolute;
    cursor: pointer;
}

.barger p,
.barger p span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

.barger p {
    position: relative;
    width: 100%;
    height: 100%;
}

.barger p span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #666;
	border-radius: 4px;
}
.barger p span:nth-of-type(1) {
	top: 0;
}
.barger p span:nth-of-type(2) {
	top: 0;
	bottom: 0;
	margin: auto 0;
}
.barger p span:nth-of-type(3) {
    bottom: 0;
}

.barger.active p span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-315deg);
	transform: translateY(10px) rotate(-315deg);
}
.barger.active p span:nth-of-type(2) {
	opacity: 0;
}
.barger.active p span:nth-of-type(3) {
	-webkit-transform: translateY(-17px) rotate(315deg);
	transform: translateY(-17px) rotate(315deg);
}

header > div {
    max-width: 1120px;
    margin: 0 auto;
    display: block;
    padding: 20px 0 0 0;
    position: relative;
}

header h1 {
	font-size: 3.8vw;
    font-weight: bold;
    width: 100%;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 0 0 20px 0;
}

header nav {
    width: 100%;
    margin: 0 auto;
    padding: 15px 0;
	background: #F2F2F2;
	display: none;
}

header nav > ul {
    display: block;
    padding: 0 20px;
}

header nav > ul > li {
    position: relative;
    font-size: 18px;
    cursor: pointer;
    border-bottom: 1px solid #000;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
}

header nav > ul > li:after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 5px;
	top: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

header nav > ul > li.open:after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 5px;
	top: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

header nav > ul > li ul {
    background: none;
    padding: 15px 0;
    position: initial;
    left: 0;
    top: 20px;
    z-index: 100;
    display: none;
}
}

$(document).ready(function() {
	var checkResize;
	$(window).on('load resize', function() {
		clearTimeout( checkResize );
		checkResize = setTimeout( resizing, 100 );
	});

	function resizing() {
		var w = $(window).width();


		if( w > 700 ) {
			$(function() {
				var nav = $('nav > ul');
				$('li', nav).mouseover(function() {
					$('ul', this).stop().slideDown('fast');
				})
				.mouseout(function() {
					$('ul', this).stop().slideUp('fast');
				});

			});


		} else {
			$(function(){
				$(".barger").click(function(){
					$("header nav").slideToggle();
					$(this).toggleClass("active");
				});

				$("header nav > ul > li").click(function(){
					$(this).children("ul").slideToggle();
					$(this).toggleClass("open");

				});
			});
		}

	}
});

試したこと

単純に考えて、リサイズする度にリロードするようにしました。
結果として、グローバルナビの挙動は正常に動きましたが、
リサイズの度にリロードされるのが見た目的にも宜しくないので、辞めました。

次に、クリックされた時に追加されるクラスやスタイルを700px以上にリサイズされた時に削除するようにしました。
クラスやスタイルは削除されたのですが、SP時の不具合は解消されませんでした。

補足情報（FW/ツールのバージョンなど）

クラスやスタイルを削除する記述を追加したソースが下記になります。

$(document).ready(function() {
	var checkResize;
	$(window).on('load resize', function() {
		clearTimeout( checkResize );
		checkResize = setTimeout( resizing, 100 );
	});

	function resizing() {
		var w = $(window).width();


		if( w > 700 ) {
			$(function() {
				var nav = $('nav > ul');
				$('li', nav).mouseover(function() {
					$('ul', this).stop().slideDown('fast');
				})
				.mouseout(function() {
					$('ul', this).stop().slideUp('fast');
				});

			});

			$("header div").removeClass("active");
			$("nav").removeAttr("style","");
			$("nav li").removeClass("open");
			$("nav ul").removeAttr("style","");


		} else {
			$(function(){
				$(".barger").click(function(){
					$("header nav").slideToggle();
					$(this).toggleClass("active");
				});

				$("header nav > ul > li").click(function(){
					$(this).children("ul").slideToggle();
					$(this).toggleClass("open");

				});
			});
		}

	}
});

Answer 1

1. resizeイベントなど複数回呼ばれるイベントの中で別のイベントを登録しない。

（登録するなら、適切にイベントを除去する）
0. $(document).ready(function() {});は$(function(){});に置き換える。
0. そして$(function(){});の中に$(function(){});を置かない（意味が無いので）。

resizeイベントでは現在の幅（というか判定）を変数に保存し、clickイベントやmouseoverイベントの「閉じる処理」を行う。
で、clickイベントやmouseoverイベントは必要な箇所に付けた上で、関数内で先ほどの変数を確認し、必要なら動き、必要でないなら処理をしない、という設計のほうがよいと思います。

$( function() {
    var checkResize, size;
    $( window ).on( 'load resize', function() {
        clearTimeout( checkResize );
        checkResize = setTimeout( resizing, 100 );
    } );
    function resizing() {
        size = ( $( window ).width() > 700 );
        // 適当リセット（未検証）
        $( 'nav > ul ul, header nav, header nav > ul > li > ul' ).stop().slideUp( 'fast' );
        $( '.active' ).removeClass( 'active' );
        $( '.open' ).removeClass( 'open' );
    }
    var nav = $( 'nav > ul' );
    $('li', nav ).mouseover( function() {
        if ( !size ) return;
        $( 'ul', this ).stop().slideDown( 'fast' );
    } )
    .mouseout( function() {
        if ( !size ) return;
        $( 'ul', this ).stop().slideUp( 'fast' );
    } );
    $( '.barger' ).click( function() {
        if ( size ) return;
        $( 'header nav' ).slideToggle();
        $( this ).toggleClass( 'active' );
    } );
    $( 'header nav > ul > li' ).click( function() {
        if ( size ) return;
        $( this ).children( 'ul' ).slideToggle();
        $( this ).toggleClass( 'open' );
    } );
} ); // 未検証

Comments

[sakio6]

kei344様

ご回答頂きありがとうございます。
基本的な部分もご教示頂き大変勉強になりました。
まだまだ勉強不足なのを痛感しております。基本的な部分などもこれからも勉強していきたいと思います。

また、機会がありましたら是非ご指導頂けますと幸いです。