Q&A
メニューバーの表示・非表示のボタンを作成しているのですが、うまくいきません。
最初の何もない状態に不透明と非表示を（opacity: 0; visibility: hidden;）用意して、
Jquaryでクリック後にaddclassのnav_showの要素が加わることによってメニューを表示したいです。
どなたかご協力をお願い。
HTML： <!DOCTYPE html> <html xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jquery-2.1.1min.js"></script> </head> <body> <div class="fixer"> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <div id="nav" class="clearfix"> <ul id="menu" class="menu_bar"> <li>Home</li> <li><a></a></li> <li> <ul class="child"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </li> <li> <ul class="child"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </li> <li>Web Design <ul class="child"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </li> <li>Language <ul class="child"> <li>English</li> <li><a href="#">Japanese</a></li> </ul> </li> </ul> </div>
Jquary： $(function(){ $('.container').on('click',function(){ $('clearfix').addClass('.nav_show'); },function(){ $('clearfix').removeClass('.nav_show'); }); });
CSS： .container{ display: inline-block; cursor: pointer; padding-right: 0px; padding-left: 30px; padding-bottom: 0px; -webkit-box-shadow: inset 0px 0px; box-shadow: inset 0px 0px; margin-bottom: 0px; padding-top: 15px; opacity: 1; } clearfix { opacity: 0; visibility: hidden; } .nav_show{opacity:'1'; visibility:visible; display: inline-block; border-width : 0px 0px 0px 1px; border-style : inset; border-color: #ccc; padding-top: 0; padding-left: 15px; padding-bottom: 0px; margin-top: 20px; margin-right: 42px; margin-left: -17px; background-color: #32323; position: static; font-family: Georgia, "Times New Roman", Times, serif; white-space: nowrap; letter-spacing: 3px; font-size: 18px; color: #434343; }
回答3件
0
提示された情報から、明らかな間違いを訂正したものが以下の状態です。
CSS、JavaScript 部分でセレクタの設定がめちゃくちゃでした。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 .container{ 7 display: inline-block; 8 cursor: pointer; 9 padding-right: 0px; 10 padding-left: 30px; 11 padding-bottom: 0px; 12 -webkit-box-shadow: inset 0px 0px; 13 box-shadow: inset 0px 0px; 14 margin-bottom: 0px; 15 padding-top: 15px; 16 opacity: 1; 17 } 18 .clearfix { 19 opacity: 0; 20 visibility: hidden; 21 } 22 .nav_show{ 23 opacity:'1'; 24 visibility:visible; 25 display: inline-block; 26 border-width : 0px 0px 0px 1px; 27 border-style : inset; 28 border-color: #ccc; 29 padding-top: 0; 30 padding-left: 15px; 31 padding-bottom: 0px; 32 margin-top: 20px; 33 margin-right: 42px; 34 margin-left: -17px; 35 background-color: #323232; 36 position: static; 37 font-family: Georgia, "Times New Roman", Times, serif; 38 white-space: nowrap; 39 letter-spacing: 3px; 40 font-size: 18px; 41 color: #434343; 42 } 43 </style> 44 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> 45 <script type="text/javascript"> 46 $(function () { 47 $('.container').on('click', function () { 48 $('.clearfix').addClass('nav_show'); 49 }, function () { 50 $('.clearfix').removeClass('nav_show'); 51 }); 52 }); 53 </script> 54 </head> 55 56 <body> 57 <div class="fixer"> 58 <div class="container"> 59 <div class="bar1"></div> 60 <div class="bar2"></div> 61 <div class="bar3"></div> 62 </div> 63 <div id="nav" class="clearfix"> 64 <ul id="menu" class="menu_bar"> 65 <li>Home</li> 66 <li><a></a></li> 67 <li> 68 <ul class="child"> 69 <li><a href="#"></a></li> 70 <li><a href="#"></a></li> 71 <li><a href="#"></a></li> 72 </ul> 73 </li> 74 <li> 75 <ul class="child"> 76 <li><a href="#"></a></li> 77 <li><a href="#"></a></li> 78 </ul> 79 </li> 80 <li>Web Design 81 <ul class="child"> 82 <li><a href="#"></a></li> 83 <li><a href="#"></a></li> 84 </ul> 85 </li> 86 <li>Language 87 <ul class="child"> 88 <li>English</li> 89 <li><a href="#">Japanese</a></li> 90 </ul> 91 </li> 92 </ul> 93 </div> 94 </div> 95 </body> 96</html>
投稿2016/12/10 16:13
退会済みユーザー
総合スコア0
0
ベストアンサー
表示・非表示トグル部分だけ。
JavaScript
1$( function() { 2 $( '.container' ).on( 'click', function() { 3 $( '.clearfix' ).toggleClass( 'nav_show' ); 4 } ); 5} ); 6```**動くサンプル：**[https://jsfiddle.net/d92hvxj5/](https://jsfiddle.net/d92hvxj5/) 7 8--- 9 10【.toggleClass() | jQuery 1.9 日本語リファレンス | js STUDIO】 11[http://js.studio-kingdom.com/jquery/attributes/toggle_class](http://js.studio-kingdom.com/jquery/attributes/toggle_class) 12 13【.toggleClass() | jQuery API Documentation】 14[http://api.jquery.com/toggleclass/](http://api.jquery.com/toggleclass/)
投稿2016/12/10 17:25
総合スコア69407
0
addClass、removeClass内ではピリオドはいりません。
$('clearfix').addClass('nav_show');
投稿2016/12/10 16:13
総合スコア486
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。