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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2141閲覧

JSでhideの解除方法にハマっています

lingwood

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/12/05 09:28

###前提・実現したいこと
先般、slideUp・slideDownのmethodを教えていただいたのですが、
ウィンドウサイズでこれを解除できず非常に急ぎ、困っております。

ヘッダーを隠しておいて、オンマウスで出現、
768px以下では常時ヘッダーが出ているようにしたいです。

###該当のソースコード
先日教えていただいたコードでとても助かりました。

//slide $(function() { $('#header').hide(); $('#m_visual').hover( function(e){ $('#header').slideDown(); }, function(e) { $('#header').slideUp(); }); }); コード

こちらを改編してスマホ対応時(768px以下)には常時出現にしたいのですが、
上手く動きません。

試行したコード例

//slide $(function() { var x = 768; var xx = $(window).width(); $('#header').hide(); $('#m_visual').hover( function(e){ $('#header').slideDown(); }, function(e) { $('#header').slideUp(); }, function(e) { if (x <= xx) { $('#header').show(); } }); });

試行したコード例

$(function() { var x = 768; var ws = $(window).width(); if (x <= ws ) { $('#header').hide(); $('#m_visual').hover( function(e){ $('#header').slideDown(); }, function(e) { $('#header').slideUp(); }); } });

###試したこと
上記以外にも試したのですがうまくできなくて
ずっとハマっています。

すみません、どうか教えていただけないでしょうか。
よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

下の試行したコード例で試してみました(PCブラウザです)が、
初期表示時に768以下なら常に表示された状態で動作できました。
なので別問題が発生しているのではないでしょうか。

もしも、ブラウザのサイズを可変したときも対応したいのであればまた別の対応が必要になりますが。。。

※以下、追記
可変対応ちょっと書いてみました。
サイズの拡大縮小時にslideDown・slideUpするとおかしくなりますので注意してください。
(サイズ変更するたびに実行されるため)

JavaScript

1$(function() { 2 // windowのサイズ判定用 3 var hoge = function(){ 4 var x = 768; 5 var ws = $(window).width(); 6 if (x <= ws ) { 7 return true; 8 } else{ 9 return false; 10 } 11 } 12 if ( hoge() ) { 13 $('#header').hide(); 14 } 15 $('#m_visual').hover(function(e){ 16 if ( hoge() ) { 17 $('#header').slideDown(); 18 } 19 }, function(e) { 20 if ( hoge() ) { 21 $('#header').slideUp(); 22 } 23 }); 24 // サイズ縮小時に#headerを表示するし、拡大時に非表示にする 25 $(window).resize(function(){ 26 console.log("リサイズしました"); 27 if(hoge()){ 28 $('#header').hide(); 29 } else{ 30 $('#header').show(); 31 } 32 }) 33});

投稿2017/12/05 09:54

編集2017/12/05 10:27
sho_jonas

総合スコア77

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

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

lingwood

2017/12/05 09:59

あれ・・・確かに・・・ sho_jonas 様 ありがとうございます!確かに挙動正しいですが、 ”ブラウザのサイズを可変したときも対応” これをしたいです >< すみません、わかりますでしょうか??? よろしくお願いしますm(_ _)m
lingwood

2017/12/05 11:23

sho_jonas 様 お世話になります。 すごいです!!!ありがとうございました!!!!できました!!! こうしてコードを見ると“なるほど”と理解できるのですが、 いざという場面になるとわからなくなってしまって 自分じゃなかなか書けないです・・・泣 本当に助かりました!!!!! ぜひまた教えてください! ありがとうございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問