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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

2回答

19029閲覧

JQueryでshowメソッドが全く効かない。

Susanoo2442

総合スコア153

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2016/11/07 08:34

ただいまWebサイトを製作しているのですが
ページが表示されたときにある要素を
display:none;で非表示にしておいて

ボタンが押されたらJQueryのshowメソッドであらかじめ非表示にしておいた要素を
表示するといった処理をしています。

しかしながら、showメソッドが全く効かなくていくらボタンを押しても
あらかじめ非表示にしておいた要素が全く表示されません。

こちらがindex.phpです。

php

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title></title> 7 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssreset/cssreset-min.css"> 8 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"> 9 <link rel="stylesheet" type="text/css" href="style.css"> 10 </head> 11 <body> 12 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 13 14 15 <script> 16 17 18 19 20 21 22 23 24 $(function(){ 25 26 $("#bbb").click(function(){ 27 28 29 30 $("#Menu").show(); 31 32 }); 33 34 35 36 37 38 39 40 41}); 42 43 44 45 46 47 48 49 50 51 52 53 </script> 54 <!-- ヘッダー --> 55 <header> 56 57 <h1 id="Main"><a href="<?php echo esc_url( get_home_url() ); ?>">IT MASTER</a></h1> 58 59 60 61 <div id="Block"></div> 62 63 64 65 66 67 68 <div id="bbb">=</div> 69 <div id="Menu"> 70 <?php wp_nav_menu(); ?> 71 72 73 74 75 76 77 </div>

こちらがstyle.cssです。

CSS

1body{ 2background-color:white; 3text-align:center; 4height:100%; 5 6} 7html{ 8 height:100%; 9} 10a{ 11color:black; 12text-decoration:none; 13} 14 15 16li{ 17list-style:none; 18color:tan; 19 20 21 22} 23ul{ 24color:tan; 25} 26p{ 27 text-align:center; 28 color:lightgray; 29 font-size:25px; 30} 31h2{ 32 color:lightgray; 33} 34 35 36 37#Main{ 38font-size:50px; 39border-bottom-style:solid; 40border-bottom-color:burlywood; 41} 42 43 44 45#Block{ 46background-color:black; 47width:20%; 48height:80px; 49float:left; 50border-bottom-style:solid; 51border-bottom-color:tan; 52 53} 54 55 56 57 58.bbb{ 59 60 display:none; 61 62 63 64} 65 66.Menu a{ 67 background-color:black; 68 color:tan; 69 width:20%; 70 height:80px; 71 float:left; 72 display:flex; 73 align-items:center; 74 justify-content:center; 75 border-bottom-style:solid; 76 border-bottom-color:burlywood; 77} 78.Menu a:hover{ 79 80 81 color:lightgray; 82 83 84 85} 86 87 88#Block2{ 89background-color:black; 90width:20%; 91height:80px; 92border-bottom-style:solid; 93border-bottom-color:burlywood; 94float:left; 95} 96#Categori{ 97background-color:black; 98width:17%; 99height:1250px; 100padding-top:80px; 101clear:both; 102border-right-style:solid; 103border-right-color:burlywood; 104} 105 106 107 108 109 110.CategoriMenu{ 111 112 113 font-size:25px; 114 border-width:1px; 115 border-bottom-style:solid; 116 border-bottom-color:#DDDDDD; 117 padding-top:30px; 118} 119 120 121 122.CategoriMenu1{ 123 color:lightgray; 124 font-size:25px; 125 padding-top:15px; 126 127 128 129} 130 131.CategoriMenu1:hover{ 132 color:tan; 133 134} 135 136 137#Block3{ 138 background-color:black; 139 width:17%; 140 height:120.8px; 141 float:left; 142 border-right-style:solid; 143 border-right-color:burlywood; 144} 145#MainContent{ 146 background-color:black; 147 width:50%; 148 float:left; 149 /*height:1450px;*/ 150 min-height:1450px; 151 height:auto; 152 margin-left:8%; 153 margin-top:-1330px; 154 border-right-style:solid; 155 border-right-color:burlywood; 156 border-left-style:solid; 157 border-left-color:burlywood; 158} 159.PictureContent{ 160 float:left; 161 padding-left:26%; 162 padding-top:40px; 163} 164.TitleContent{ 165 color:burlywood; 166 font-size:30px; 167 padding-left:5%; 168 padding-top:60px; 169 float:left; 170} 171.DataContent{ 172color:burlywood; 173font-size:20px; 174position:relative; 175top:-60px; 176clear:both; 177} 178.PostContent{ 179padding-top:0px; 180overflow:hidden; 181font-size:10px; 182} 183.more-link{ 184 color:burlywood; 185} 186.Block4{ 187background-color:black; 188margin-left:25.1%; 189height:0.1px; 190width:50%; 191clear:both; 192top:-2px; 193position:relative; 194border-right-style:solid; 195border-right-color:tan; 196border-left-style:solid; 197border-left-color:tan; 198 199} 200.Block5{ 201background-color:black; 202margin-left:25.1%; 203height:0.1px; 204width:50%; 205float:left; 206position:relative; 207top:-2px; 208border-right-style:solid; 209border-right-color:tan; 210border-left-style:solid; 211border-left-color:tan; 212 213} 214.ProfileContent{ 215background-color:black; 216width:17%; 217height:1450px; 218margin-left:82.9%; 219margin-top:-1450px; 220float:left; 221border-left-style:solid; 222border-left-color:tan; 223border-top-style:solid; 224border-top-color:tan; 225color:lightgray; 226font-size:10px; 227} 228 229 230 231 232 233 234 235@media screen and (max-width: 500px) { 236 237 238 239 240 241 242body{ 243 background-color:black; 244 text-align:center; 245 246} 247a{ 248color:tan; 249text-decoration:none; 250 251} 252 253#Main{ 254 font-size:25px; 255 border-style:none; 256 position:relative; 257 left:-10%; 258 float:right; 259 260 261} 262 263#Block{ 264display:none; 265} 266 267 268 269#bbb{ 270 271 272 background-color:black; 273 border-style:none; 274 display:block; 275 color:tan; 276 font-size:50px; 277 position:absolute; 278 top:-30px; 279 left:0px; 280 281 282 283 284 285} 286 287 288#Menu a{ 289clear:both; 290border-style:none; 291background-color:blue; 292border-top-style:solid; 293border-top-color:blue; 294padding-right:10%; 295padding-left:5%; 296padding-top:0px; 297white-space:nowrap; 298display:none; 299 300} 301#aaa a{ 302 303display:block; 304clear:both; 305border-style:none; 306background-color:blue; 307border-top-style:solid; 308border-top-color:blue; 309padding-right:10%; 310padding-left:5%; 311padding-top:0px; 312white-space:nowrap; 313 314 315 316} 317 318 319#Block2{ 320display:none; 321 322 323 324} 325 326}

やりたいこととしては
Menuの要素をページが表示されたときは
あらかじめ隠しておいて
ボタンをおしたら表示ということが目的であります。

問題が解決され
目的が達成されるべく
アドバイス頂けたらと思います。

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

「#menu」のaをdisplay:noneにしているなら
$("#Menu").show()してもaは隠れたままですね
せめて$("#Menu a").show()してください

cssとjavascriptで設定が競合することもあるので
hide処理はjavascript側で行うなり、#Menuのaではなく
非表示用のクラスを別途設定して付加しておくなどが必要
class="hide"のような感じにして、そのタグのclassをつけたり消したりする

投稿2016/11/07 08:44

編集2016/11/07 09:10
yambejp

総合スコア114581

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

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

0

(#Menu a) を出すなら

$('#Menu a').show()

で出ます

投稿2016/11/07 10:39

編集2016/11/07 10:40
kimurayutaka

総合スコア71

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問