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

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

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

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

jQuery

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

Q&A

解決済

1回答

2207閲覧

アコーディオンメニューの開閉を示すアイコンがうまく機能しない

kitikiti

総合スコア17

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/07/04 02:41

編集2018/07/04 04:47

メニューをクリックするとアイコンがマイナスになりません。

下記のようなコードなのですが、どこを改善すればよいでしょうか?
どこがネックになっているかわからなかったのでjavascript得意な方見ていただけませんでしょうか?

プラス(+)マイナス(-)機能が機能しません。

閉じている時
開いているとき

js

1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script type="text/javascript"> 3$(function(){ 4 $("#menu > li > p.accordion_icon").removeClass('active'); 5 $("#menu > li > ul").hide(); 6 $("#menu > li").on("click",function(){ 7 $(this).siblings("li").find('> ul').slideUp(); 8 $(this).siblings("li").find('> p.accordion_icon').removeClass('active'); 9 $(this).find('> ul').slideToggle(800); 10 $(this).find('> p.accordion_icon').toggleClass('active'); 11 }); 12}); 13</script>

html

1<ul id="menu"> 2<li><a href="#">●×●×</a></li> 3<li><a href="#" class="menus">●×●×<p class="accordion_icon"><span></span><span></span></p></a> 4<ul class="child" > 5<li><a href="#">●×●×</a></li> 6<li><a href="#">●×●×</a></li> 7<li><a href="#">●×●×</a></li> 8</ul> 9</li> 10</ul>

css

1 2 3ul#menu li{ 4 5 background-color: #f8f8f8; 6 border-top: solid 1px #e3e3e3; 7 border-bottom: solid 1px #e3e3e3; 8} 9 10ul#menu li a{ 11 color: #000000; 12 text-decoration: none; 13 display: block; 14 padding: 15px; 15 16} 17 18ul#menu li a:hover{ 19 text-decoration: underline; 20 background: #e3e3e3; 21} 22 23ul#menu li a:before { 24 display: block; 25 content: ""; 26 position: absolute; 27 -webkit-transform: rotate(45deg); 28 transform: rotate(45deg); 29 left: 235px; 30 width: 8px; 31 height: 8px; 32 margin-top: 4px; 33 background: #393939; 34} 35ul#menu li a:after { 36 display: block; 37 content: ""; 38 position: absolute; 39 -webkit-transform: rotate(45deg); 40 transform: rotate(45deg); 41 left: 233px; 42 width: 8px; 43 height: 8px; 44 margin-top: -12px; 45 background: #f8f8f8; 46} 47 48ul#menu li a:hover:after { 49 background: #e3e3e3; 50} 51 52ul#menu li a.menus:before { 53 display: block; 54 content: ""; 55 position: absolute; 56 -webkit-transform: rotate(0deg); 57 transform: rotate(0deg); 58 left: 231px; 59 width: 0px; 60 height: 0px; 61 margin-top: 0px; 62 background: #393939; 63 font-weight: bold; 64} 65 66ul#menu li a.menus:after { 67 display: block; 68 content: ""; 69 position: absolute; 70 -webkit-transform: rotate(0deg); 71 transform: rotate(0deg); 72 left: 233px; 73 width: 0px; 74 height: 0px; 75 margin-top: -12px; 76 background: #f8f8f8; 77} 78 79ul#menu li a.menus:hover:after { 80 background: none 81} 82 83/*アイコンプラスマイナス*/ 84.accordion_icon, 85.accordion_icon span { 86 display: inline-block; 87 transition: all .4s; 88 box-sizing: border-box; 89} 90.accordion_icon { 91 position: relative; 92 width: 25px; 93 height: 25px; 94 float: right; 95 margin-right: -7px; 96 /* margin-top: -90px; */ 97} 98.accordion_icon span { 99 position: absolute; 100 left: 6px; 101 width: 50%; 102 height: 2px; 103 background-color: black; 104 border-radius: 4px; 105 -webkit-border-radius: 4px; 106 -ms-border-radius: 4px; 107 -moz-border-radius: 4px; 108 -o-border-radius: 4px; 109} 110.accordion_icon span:nth-of-type(1) { 111 top: 5px; 112 transform: rotate(0deg); 113 -webkit-transform: rotate(0deg); 114 -moz-transform: rotate(0deg); 115 -ms-transform: rotate(0deg); 116 -o-transform: rotate(0deg); 117} 118.accordion_icon span:nth-of-type(2) { 119 top: 5px; 120 transform: rotate(90deg); 121 -webkit-transform: rotate(90deg); 122 -moz-transform: rotate(90deg); 123 -ms-transform: rotate(90deg); 124 -o-transform: rotate(90deg); 125} 126/*+、-切り替え*/ 127.accordion_icon.active span:nth-of-type(1) { 128 display:none; 129} 130.accordion_icon.active span:nth-of-type(2) { 131 top: 5px; 132 transform: rotate(180deg); 133 -webkit-transform: rotate(180deg); 134 -moz-transform: rotate(180deg); 135 -ms-transform: rotate(180deg); 136 -o-transform: rotate(180deg); 137} 138 139 140 141 142ul#menu ul.child{ 143 display: none; 144 padding: 0; 145 background: #e3e3e3; 146 width: 275px; 147 -moz-box-sizing: border-box; 148 -webkit-box-sizing: border-box; 149 -o-box-sizing: border-box; 150 -ms-box-sizing: border-box; 151 box-sizing: border-box; 152 153} 154 155ul#menu ul.child li{ 156 border-top: none; 157 border-bottom: none; 158 margin-left: 70px; 159 padding-left: -15px !important; 160 background: #e3e3e3; 161 color: #000000; 162 list-style-type: disc; 163} 164 165 166ul#menu ul.child li a{ 167 background: #e3e3e3; 168 display: block; 169 text-decoration: none; 170 color: #000000; 171 -moz-box-sizing: border-box; 172 -webkit-box-sizing: border-box; 173 -o-box-sizing: border-box; 174 -ms-box-sizing: border-box; 175 box-sizing: border-box; 176} 177 178ul#menu ul.child li a:hover{ 179 text-decoration: underline; 180} 181 182 183ul#menu ul.child li a:before { 184 display: none; 185} 186ul#menu ul.child li a:after { 187 display: none; 188} 189ul#menu ul.child li a:hover:after { 190 display: none 191} 192コード

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

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

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

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

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

guest

回答1

0

ベストアンサー

提示HTML中に accordion_icon が出てくるのは一か所だけですが、li の子要素ではないため引っかかりません(activeになりません)。

投稿2018/07/04 03:21

x_x

総合スコア13749

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

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

kitikiti

2018/07/04 03:24

今回は1か所のみになります。 1か所のみだと書き方が変わるのでしょうか。
x_x

2018/07/04 04:04

数は関係ないですが?
kitikiti

2018/07/04 04:17

よくわからず申し訳ありません。 どのようにすればいいのでしょうか。
x_x

2018/07/04 04:23

該当のp.accordion_icon を li の子要素にすればいいのではないでしょうか。 ところで、提示されたコードは自分で確認してみたのでしょうか? デザインからはこれがメニューであることがわかりません。
x_x

2018/07/04 04:43

もちろん、HTMLを変えるのではなくスクリプトを、"> p.accordion_icon" から "> a > p.accordion_icon" にすることも考えられます。
kitikiti

2018/07/04 04:48

イメージをアップしました。
kitikiti

2018/07/04 04:49

ありがとうございます。 スクリプトの変更でなりました。 ご協力に感謝します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問