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

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

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

JasperReportsはオープンソースの帳票生成ツールです。JasperReportはPDF, HTML, Microsoft Excel, ODT, XML等の様々なフォーマットのものをエクスポートします。

jQuery

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

Q&A

解決済

1回答

3929閲覧

現在のhoverをクリックで上に伸びるように記述するには?

rrryo719719

総合スコア13

JasperReports

JasperReportsはオープンソースの帳票生成ツールです。JasperReportはPDF, HTML, Microsoft Excel, ODT, XML等の様々なフォーマットのものをエクスポートします。

jQuery

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

0グッド

0クリップ

投稿2015/08/18 14:09

こんにちは。

下部のfooterをマウスhoverすると、height:365pxまで伸びるように設定してあります。
変更したい点は、以下です。

①footerをhoverではなくクリックで伸び縮みできるようにしたい
②現時点ではfooterに指定してありますが、<img id="facebook"~の画像をクリックで伸び縮みできるようにしたい

ド素人なので、下記のコードを作動するように記述して下さると幸いです。
ここをこうしたら?的な簡単な説明だときっと無理・・・。
お手数ですが、宜しくお願い致します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<!doctype html> <html> <head> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <style> /*footer ▼-*/ #timeline{ margin-left:50px; margin-top:0px; padding-top:0px; background:#FFFFFF; } #snapwidget{ margin-left:10px; } #youtube{ padding-top:0px; margin-top:0px; margin-left:7px; } /*fb,insta,youtube マークの場所配置 ▼*/ #facebook { margin-left:1000px; margin-bottom:0px; padding-bottom:0px; margin-top:3px; } #copyright{ padding-top:0px; margin-top:0px; margin-right:46px; float:right; } /*footer クラスhover 色の設置▼*/ footer{ position: fixed !important; position: absolute; width:100%; bottom:0px; background:#CCC; background: linear-gradient(#a9a9a9 0%, #fff 40%); /*Chrome Safari用*/ background: -webkit-linear-gradient(#cccccc 0%, #fff 40%); /*Forefox用*/ background: -moz-linear-gradient(#ccc 0%, #fff 40%); /*Opera*/ background: -o-linear-gradient(#ccc 0%, #fff 40%); /*IE6-9用*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /*IE10用*/ background: -ms-linear-gradient(#ccc 0%, #fff 40%); opacity: 0.9; height:40px; -moz-transition: 0.5s linear; -webkit-transition: 0.5s linear; transition: 0.5s linear; } /*footerをhoverした時 伸びる高さ*/ footer:hover{ height:365px; } /*footer ▲-*/ </style> <body> <!--footer ▼--> <footer> <!-- facebookマーク画像の設定 --> <img id="facebook" src="images/facebook2.png" width="35" height="35"alt="cloud"/> <!-- timeline --> <iframe id="timeline" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhazukikouei&amp;width=500&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=true&amp;show_border=false&amp;appId=745976198821640" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:300px;" allowTransparency="true"></iframe> <!-- Insta SnapWidget --> <iframe src="http://snapwidget.com/in/?u=eXVraWFveWF8aW58MTI1fDJ8Mnx8bm98Mnxub25lfG9uU3RhcnR8eWVzfG5v&ve=250615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:224px; height:305px"></iframe> <!-- youtube --> <iframe id="youtube" width="500" height="303" src="https://www.youtube.com/embed/2v9GnDiBGyQ" frameborder="0" allowfullscreen></iframe> <p id="copyright">©2014aaaaa.All Rights Reserved</p> </footer> <!--footer ▲--> </body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

これでどうでしょうか。
footer:hoverをfooter.showupにして、
クリックした時にjavascriptでshowupクラスを付け外しします。

html

1<!doctype html> 2<html> 3<head> 4<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 6 7 8 9 10</head> 11 12 13<style> 14/*footer ▼-*/ 15#timeline{ 16 margin-left:50px; 17 margin-top:0px; 18 padding-top:0px; 19 background:#FFFFFF; 20 } 21 22#snapwidget{ 23margin-left:10px; 24} 25 26#youtube{ 27padding-top:0px; 28margin-top:0px; 29margin-left:7px; 30} 31 32 33 34/*fb,insta,youtube 35マークの場所配置 ▼*/ 36#facebook { 37 margin-left:1000px; 38 margin-bottom:0px; 39 padding-bottom:0px; 40 margin-top:3px; 41 } 42#copyright{ 43 padding-top:0px; 44 margin-top:0px; 45 margin-right:46px; 46 float:right; 47} 48 49 50 51/*footer クラスhover 色の設置▼*/ 52footer{ 53 54 position: fixed !important; 55 position: absolute; 56 width:100%; 57 bottom:0px; 58 background:#CCC; 59 background: linear-gradient(#a9a9a9 0%, #fff 40%); 60 /*Chrome Safari用*/ 61 background: -webkit-linear-gradient(#cccccc 0%, #fff 40%); 62 /*Forefox用*/ 63 background: -moz-linear-gradient(#ccc 0%, #fff 40%); 64 /*Opera*/ 65 background: -o-linear-gradient(#ccc 0%, #fff 40%); 66 /*IE6-9用*/ 67 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); 68 /*IE10用*/ 69 background: -ms-linear-gradient(#ccc 0%, #fff 40%); 70 opacity: 0.9; 71 height:40px; 72 -moz-transition: 0.5s linear; 73 -webkit-transition: 0.5s linear; 74 transition: 0.5s linear; 75} 76 77/*footerをクリックした時 伸びる高さ*/ 78footer.showup { 79 height: 365px; 80} 81 82/*footer ▲-*/ 83</style> 84 85 86<script> 87$(function () { 88 $('footer').on('click', function () { 89 $('footer').toggleClass('showup'); 90 }); 91}); 92</script> 93 94<body> 95 96<!--footer ▼--> 97<footer> 98<!-- facebookマーク画像の設定 --> 99<img id="facebook" src="images/facebook2.png" width="35" height="35"alt="cloud"/> 100<!-- timeline --> 101 <iframe id="timeline" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhazukikouei&amp;width=500&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=true&amp;show_border=false&amp;appId=745976198821640" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:300px;" allowTransparency="true"></iframe> 102 103<!-- Insta SnapWidget --> 104<iframe src="http://snapwidget.com/in/?u=eXVraWFveWF8aW58MTI1fDJ8Mnx8bm98Mnxub25lfG9uU3RhcnR8eWVzfG5v&ve=250615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:224px; height:305px"></iframe> 105 106<!-- youtube --> 107<iframe id="youtube" width="500" height="303" src="https://www.youtube.com/embed/2v9GnDiBGyQ" frameborder="0" allowfullscreen></iframe> 108<p id="copyright">©2014aaaaa.All Rights Reserved</p> 109 110</footer> 111 112 113<!--footer ▲--> 114</body> 115</html>

投稿2015/08/18 14:34

ikeyan

総合スコア136

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

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

rrryo719719

2015/08/19 08:52

ikeyanさん こんにちは。 ありがとうございます、クリックで作動するようになりました! ですが、ここで問題が・・・。 すでにJQがもう一つありまして、<head>内に記述すると動かないので</body>直下に記述してみてもやはり動かず。 JQ複数の記述方法をご教示いただけないでしょうか。 コードは下記です。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <script> //スムーススクロールと各コンテンツbox-85の高さ調整//// $(function() { $(".scroll").click(function(event){ event.preventDefault(); var url = this.href; var parts = url.split("#"); var target = parts[1]; var target_offset = $("#"+target).offset(); var target_top = target_offset.top; $('html, body').animate({scrollTop:target_top-95}, 1500); }); }); </script> <script> //footerクリックで開閉//// $(function () { $('footer').on('click', function () { $('footer').toggleClass('showup'); }); }); </script> 宜しくお願い致します。 Ryoko Sato
ikeyan

2015/08/19 12:38

.scrollのついている要素がないと何が起こっているかわかりません。 $(function)自体は、複数あってもHTMLのロード後に順番に実行されるだけです。 大抵のブラウザでF12を押すとデバッグできるので、エラーが起きていないかなど テスト・デバッグしましょう。 これ以上アドバイスするには、ソース全体が必要です。
rrryo719719

2015/08/20 08:24

ikeyanさん こんにちは。 .scrollは以下のnavをクリックでコンテンツに飛ぶようになっています。よくあるシンプルなパララックススクロールです。 他のコードには.scrollはかかってないので、これでご判断できますか? ソース全体となると、すごい量になってしまうので・・・。 記述方法のご教示、宜しくお願い致します。 Ryoko Sato <nav> <h1>サイトナビゲーション</h1> <ul id="dropmenu"> <li><a href="#top" class="scroll">Top</a></li> <li><a href="#introduce" class="scroll">薬膳レシピとは</a></li> <li><a href="#kisetusetumei" class="scroll kisetsugyoukan">季節の薬膳</a> <ul> <li><a href="#kisetusetumei" class="scroll kisetsugyoukan">季節の薬膳について</a> <li><a href="#harubox" class="scroll kisetsugyoukan">春の薬膳</a></li> <li><a href="#natsubox" class="scroll kisetsugyoukan">夏の薬膳</a></li> <li><a href="#akibox" class="scroll kisetsugyoukan">秋の薬膳</a></li> <li><a href="#fuyubox" class="scroll kisetsugyoukan">冬の薬膳</a></li> <li><a href="#doyoubox" class="scroll kisetsugyoukan">土用の薬膳</a></li> </ul> <li><a href="#basictypecheck" class="scroll">基本体質のチェック</a></li> <li><a href="#typedescription" class="scroll">気・血・水について</a></li> <li><a href="#mix" class="scroll">混合タイプの特徴</a></li> <li><a href="#content6" class="scroll">不調の原因チェック</a> <ul> <li><a href="#content6" class="scroll">不調の原因チェックへ</a> <li><a href="t-qi.html"target="_blank">気虚の改善策とレシピ</a></li> <li><a href="t-xue.html"target="_blank">血虚の改善策とレシピ</a></li> <li><a href="t-shui.html"target="_blank">陰虚の改善策とレシピ</a></li> <li><a href="n-qi.html"target="_blank">気滞の改善策とレシピ</a></li> <li><a href="n-xue.html"target="_blank">血滞の改善策とレシピ</a></li> <li><a href="n-shui.html"target="_blank">水滞の改善策とレシピ</a></li> </ul> </li> <li><a href="#Profile" class="scroll">Profile</a></li> <li><a href="#Lesson" class="scroll">Lesson</a></li> </ul> </nav>
ikeyan

2015/08/21 13:02

手元で2つを合わせたものを実行しましたが、問題なく動作しました。 以下のHTMLはFirefox, Chrome, IEで動作確認しました。 2015/08/20 17:24の<nav>はHTMLの構造がおかしかったので適当に直してあります。 (Content-Typeは保存時のEncodingに合わせてください) IEはローカルのHTMLを閲覧するときは初め<script>の実行が禁止されていて動作しませんでしたが、もしかしてこれが理由? <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style> /*footer ▼-*/ #timeline{ margin-left:50px; margin-top:0px; padding-top:0px; background:#FFFFFF; } #snapwidget{ margin-left:10px; } #youtube{ padding-top:0px; margin-top:0px; margin-left:7px; } /*fb,insta,youtube マークの場所配置 ▼*/ #facebook { margin-left:1000px; margin-bottom:0px; padding-bottom:0px; margin-top:3px; } #copyright{ padding-top:0px; margin-top:0px; margin-right:46px; float:right; } /*footer クラスhover 色の設置▼*/ footer{ position: fixed !important; position: absolute; width:100%; bottom:0px; background:#CCC; background: linear-gradient(#a9a9a9 0%, #fff 40%); /*Chrome Safari用*/ background: -webkit-linear-gradient(#cccccc 0%, #fff 40%); /*Forefox用*/ background: -moz-linear-gradient(#ccc 0%, #fff 40%); /*Opera*/ background: -o-linear-gradient(#ccc 0%, #fff 40%); /*IE6-9用*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /*IE10用*/ background: -ms-linear-gradient(#ccc 0%, #fff 40%); opacity: 0.9; height:40px; -moz-transition: 0.5s linear; -webkit-transition: 0.5s linear; transition: 0.5s linear; } /*footerをクリックした時 伸びる高さ*/ footer.showup { height: 365px; } /*footer ▲-*/ </style> <script> $(function () { console.log("footer:", $('footer').get()); console.log("scroll:", $('.scroll').get()); $('footer').on('click', function () { console.log("footer clicked"); $('footer').toggleClass('showup'); }); }); $(function () { //スムーススクロールと各コンテンツbox-85の高さ調整//// $(".scroll").click(function(event){ console.log("scroll clicked"); event.preventDefault(); var target_top = $("#" + this.href.split("#")[1]).offset().top; $('html, body').animate({scrollTop:target_top-95}, 1500); }); }); </script> </head> <body> <a href="#target" class="scroll">targetへ</a> <nav> <h1>サイトナビゲーション</h1> <ul id="dropmenu"> <li><a href="#top" class="scroll">Top</a></li> <li><a href="#introduce" class="scroll">薬膳レシピとは</a></li> <li> <a href="#kisetusetumei" class="scroll kisetsugyoukan">季節の薬膳</a> <ul> <li><a href="#kisetusetumei" class="scroll kisetsugyoukan">季節の薬膳について</a></li> <li><a href="#harubox" class="scroll kisetsugyoukan">春の薬膳</a></li> <li><a href="#natsubox" class="scroll kisetsugyoukan">夏の薬膳</a></li> <li><a href="#akibox" class="scroll kisetsugyoukan">秋の薬膳</a></li> <li><a href="#fuyubox" class="scroll kisetsugyoukan">冬の薬膳</a></li> <li><a href="#doyoubox" class="scroll kisetsugyoukan">土用の薬膳</a></li> </ul> </li> <li><a href="#basictypecheck" class="scroll">基本体質のチェック</a></li> <li><a href="#typedescription" class="scroll">気・血・水について</a></li> <li><a href="#mix" class="scroll">混合タイプの特徴</a></li> <li> <a href="#content6" class="scroll">不調の原因チェック</a> <ul> <li><a href="#content6" class="scroll">不調の原因チェックへ</a></li> <li><a href="t-qi.html" target="_blank">気虚の改善策とレシピ</a></li> <li><a href="t-xue.html" target="_blank">血虚の改善策とレシピ</a></li> <li><a href="t-shui.html" target="_blank">陰虚の改善策とレシピ</a></li> <li><a href="n-qi.html" target="_blank">気滞の改善策とレシピ</a></li> <li><a href="n-xue.html" target="_blank">血滞の改善策とレシピ</a></li> <li><a href="n-shui.html" target="_blank">水滞の改善策とレシピ</a></li> </ul> </li> <li><a href="#Profile" class="scroll">Profile</a></li> <li><a href="#Lesson" class="scroll">Lesson</a></li> </ul> </nav> ページを縦に長くする↓ <div style="background-color: gray; height: 1000px; width: 10px"></div> <h1 id="top">Top</h1> <h1 id="introduce">薬膳レシピとは</h1> <h1 id="kisetusetumei">季節の薬膳</h1> <h2 id="kisetusetumei" class="kisetsugyoukan">季節の薬膳について</h2> <h2 id="harubox" class="kisetsugyoukan">春の薬膳</h2> <h2 id="natsubox" class="kisetsugyoukan">夏の薬膳</h2> <h2 id="akibox" class="kisetsugyoukan">秋の薬膳</h2> <h2 id="fuyubox" class="kisetsugyoukan">冬の薬膳</h2> <h2 id="doyoubox" class="kisetsugyoukan">土用の薬膳</h2> <div style="background-color: gray; height: 1000px; width: 10px"></div> <h1 id="basictypecheck">基本体質のチェック</h1> <h1 id="typedescription">気・血・水について</h1> <h1 id="mix">混合タイプの特徴</h1> <h1 id="content6">不調の原因チェック</h1> <h2 id="content6">不調の原因チェックへ</h2> <h1 id="Profile">Profile</h1> <h1 id="Lesson">Lesson</h1> <h1 id="target">target</h1> <!--footer ▼--> <footer> <!-- facebookマーク画像の設定 --> <img id="facebook" src="images/facebook2.png" width="35" height="35"alt="cloud"/> <!-- timeline --> <iframe id="timeline" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhazukikouei&amp;width=500&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=true&amp;show_border=false&amp;appId=745976198821640" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:300px;" allowTransparency="true"></iframe> <!-- Insta SnapWidget --> <iframe src="http://snapwidget.com/in/?u=eXVraWFveWF8aW58MTI1fDJ8Mnx8bm98Mnxub25lfG9uU3RhcnR8eWVzfG5v&ve=250615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:224px; height:305px"></iframe> <!-- youtube --> <iframe id="youtube" width="500" height="303" src="https://www.youtube.com/embed/2v9GnDiBGyQ" frameborder="0" allowfullscreen></iframe> <p id="copyright">©2014aaaaa.All Rights Reserved</p> </footer> <!--footer ▲--> </body> </html>
rrryo719719

2015/08/23 08:12

ikeyanさん こんにちは。 ありがとうございます! 2つとも動くようになりました!! 原因は非常にシンプルでした。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> これが何かの拍子で消え、記述されてなかったことでした。 またJQの<script></script>記述が各JQに対して一つずつになっていたことでした。 簡単なミスですみません・・・。 新しいコードも詳しくご教示下さり、本当にご足労おかけしました。 ただ、すでに出来上がっているサイトでhover部分のみIE&スマホ対策としてクリックに変更するというものだったので、全部書き換えるのは無理がありまして・・・。 いずれにせよ、解決の糸口を見出して下さいまして本当に助かりました。 また、こちらのサイトで宜しくご教示いただければと思います。 本当にありがとうございました。 Ryoko Sato 今回はありがとうございました。
ikeyan

2015/08/26 01:29

> またJQの<script></script>記述が各JQに対して一つずつになっていたことでした。 これは、scriptタグ内でJavascriptとして正しければちゃんと動くはずです。 <script> $(function () { "..."; }); </script> <script> $(function () { "..."; }); </script>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問