質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

18969閲覧

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

asako-

総合スコア21

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/12/16 09:52

ナビゲーションの表示方法を画面幅により変更させたいと思っています。
●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が作用しているようなのですが、記述をどのように変更したら良いでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

投稿2016/12/16 09:56

kra8

総合スコア79

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asako-

2016/12/16 10:18

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

2016/12/16 10:24

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

2016/12/16 10:30

はい、マウスオーバー時の処理は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

2016/12/16 10:38

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

2016/12/16 10:47

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

2016/12/16 10:50

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

2016/12/16 11:12

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

0

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

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

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

あたりでどうでしょうか

投稿2016/12/16 10:00

hnw

総合スコア37

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問