jQuery slideToggleが繰り返すのを解決したいです。

Question

ナビゲーションの表示方法を画面幅により変更させたいと思っています。
●PCの場合は、マウスオーバーでナビゲーションが表示される
●タブレット・スマホの場合は、クリックで表示される
PCの場合はcssで設定し、タブレット・スマホの場合はjQueryのslideToggleを使っています。
タブレット・スマホの場合には画面サイズを判定し、当てはまる場合に、slideToggleが実行されるよう設定しました。

jQuery(function($){

	var $win = $(window);
	
	$win.on('load resize', function() {
	  var windowWidth = window.innerWidth;
	
	  if (windowWidth <= 800) {
		$(".navicon").on("click", function() {
			$(".navBox").slideToggle();
			$(this).toggleClass("active");
		});
	  }
	});

});

上記のように記述したのですが、クリックする度、slideToggleが何度も開閉を繰り返してしまいます。
resizeが作用しているようなのですが、記述をどのように変更したら良いでしょうか？

Answer 1

リサイズするたびに幾度もイベント登録されているのが原因と思われます。
ですので、イベント登録を一回ですまし、windowサイズによって処理を行うか判定すればよいかと。

jQuery(function($){
    //クリックされるたびに呼ばれる
    $(".navicon").on("click", function() {
        var windowWidth = window.innerWidth;
        // クリックされた時、windowWidthが800以下だと実行する
        if (windowWidth <= 800) {
            $(".navBox").slideToggle();
            $(this).toggleClass("active");
        }
    });
});

Comments

[asako-]

早速にご回答いただきありがとうございます！うまく動作しています。とても助かりました！
ただ、画面幅を800px以下の状態から広げたときに、ページを再読み込みしないとマウスオーバーでの表示が機能しないようなのですが、上記コードにresizeを上手く組み込む方法はありますでしょうか？
上記分でも十分かとは思うのですが、もし何か良い方法があればお教えいただけると幸いです。
初歩的な質問ばかりで大変恐縮です。

[kra8]

マウスオーバー時の処理はCSSで記述されているのですか？
よければ、そちらのコードも載せていただけると回答できるかもしれません。

[asako-]

はい、マウスオーバー時の処理はcssのみでしています。
cssは以下の様な記述をしております。

.navBox {
width: 22%;
height: -webkit-calc(100% - 120px);
height: calc(100% - 120px);
background: #fff;
position: fixed;
top: 60px;
left: 60px;
z-index: 1;
}

@media screen and (min-width: 801px) {
/* Navi - PC view
======================*/
/* Hover Effects -------------*/
.navBox {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: perspective(500px) rotateY(90deg);
-ms-transform: perspective(500px) rotateY(90deg);
transform: perspective(500px) rotateY(90deg);
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}

/* hover */
.navWrap:hover .navBox {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}

お世話をおかけし、申し訳ありません。
どうぞよろしくお願いいたします。

[kra8]

一度、800px以下にして何も操作せず、801px以上にしてマウスオーバーした際は動作しますか？

[asako-]

はい、800px以下にして何も操作しなかった場合はマウスオーバーは生きています。

[kra8]

でしたら、$(".navBox").slideToggle() した際にdisplayがnoneになってしまうのが原因かもしれません。navBoxにdisplayプロパティを追加し、blockを設定してみてはどうでしょうか

[asako-]

ありがとうございます！確かにそうでした！
もっと自分でコードを見て勉強しなければダメですね。
@media screen and (min-width: 801px) の中の .navBox に 「display: block !important;」を指定することで解決できました。
（800px以下で一旦メニューを閉じてから801px以上にした際は、style="display: none;"が残ってしまうので、!importantを付けないと効かなかったので。）

この度は大変迅速に回答いただき、また丁寧に教えていただき本当に助かりました。
感謝感謝です。ありがとうございました！！！

Answer 2

naviconというクラスの要素はいくつもあるのでしょうか？
だとしたらちゃんと動かないのではないかと思います。

$(".navBox").slideToggle();

↓

$(this).stop().slideToggle();

あたりでどうでしょうか