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

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

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

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

Q&A

解決済

1回答

7950閲覧

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

yamaoka

総合スコア27

JavaScript

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

0グッド

0クリップ

投稿2017/06/22 05:03

アコーディオンメニューを作っています。
スマホ用のもので、親メニューをクリックするとメニューバーの隣のプラスがマイナスとなり中のメニューが表示されます

クリックしたメニュー以外の場所をクリックすると自動で閉じるようになっていますイメージ説明
イメージ説明

【問題】
親メニューをクリックし開き、同じメニューをクリックするとアイコンが+に戻ります。
しかし、クリックしたメニュー以外のところをクリックすると出てきたメニューは閉じられるのですがアイコンがマイナスのままでプラスに戻ってくれません

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

javascript

$(function(){ $("#main-drop > li").on("click",function(){ $($(this).next("ul")).slideToggle(); $($(this).next("ul")).siblings("ul").slideUp(); if ($(this).children(".accordion_icon").hasClass('active')) { // activeを削除 $(this).children(".accordion_icon").removeClass('active'); } else { // activeを追加 $(this).children(".accordion_icon").addClass('active'); } }); });

html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="drop-down.js"></script> <title>Drop-Down</title> </head> <body> <div id="moblie-drop-down"> <h2 class="moblie-drop-down-h2">Title</h2> <ul id="main-drop"> <li><p class="drop-title">Sample1</p><p class="accordion_icon"><span></span><span></span></p></li> <ul class="sub-drop"> <li><a href="#"><p class="sub-drop_title">1</p><div class="arrow"></div></a></li> <li><a href="#"><p class="sub-drop_title">1</p><div class="arrow"></div></a></li> </ul> <li><p class="drop-title">Sample2</p><p class="accordion_icon"><span></span><span></span></p></li> <ul class="sub-drop"> <li><a href="#"><p class="sub-drop_title">2</p><div class="arrow"></div></a></li> <li><a href="#"><p class="sub-drop_title">2</p><div class="arrow"></div></a></li> </ul> </ul> </ul> </div> </body> </html>

css

/*アイコンプラスマイナス*/ .accordion_icon, .accordion_icon span { display: inline-block; transition: all .4s; box-sizing: border-box; } .accordion_icon { position: relative; width: 70px; height: 70px; float: right; margin-right: 5px; margin-top: -90px; } .accordion_icon span { position: absolute; left: 6px; width: 50%; height: 2px; background-color: black; border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; } .accordion_icon span:nth-of-type(1) { top: 5px; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } .accordion_icon span:nth-of-type(2) { top: 5px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } /*+、-切り替え*/ .accordion_icon.active span:nth-of-type(1) { display:none; } .accordion_icon.active span:nth-of-type(2) { top: 5px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } ```

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

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

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

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

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

x_x

2017/06/22 05:25

まずHTMLがおかしい(ul直下にulがある)ので、修正したうえで質問されてはいかがでしょうか?
guest

回答1

0

ベストアンサー

なにが正解かよくわからないですがおそらくこんな感じでしょうか?

javascript

1$(function(){ 2 $("#main-drop > li > p.accordion_icon").removeClass('active'); 3 $("#main-drop > li > ul").hide(); 4 $("#main-drop > li").on("click",function(){ 5 $(this).siblings("li").find('> ul').slideUp(); 6 $(this).siblings("li").find('> p.accordion_icon').removeClass('active'); 7 $(this).find('> ul').slideToggle(); 8 $(this).find('> p.accordion_icon').toggleClass('active'); 9 }); 10});

HTML

1<h2 class="moblie-drop-down-h2">Title</h2> 2<ul id="main-drop"> 3 <li><p class="drop-title">Sample1</p><p class="accordion_icon"><span></span><span></span></p> 4 <ul class="sub-drop"> 5 <li><a href="#"><p class="sub-drop_title">1</p><div class="arrow"></div></a></li> 6 <li><a href="#"><p class="sub-drop_title">1</p><div class="arrow"></div></a></li> 7 </ul> 8 </li> 9 <li><p class="drop-title">Sample2</p><p class="accordion_icon"><span></span><span></span></p> 10 <ul class="sub-drop"> 11 <li><a href="#"><p class="sub-drop_title">2</p><div class="arrow"></div></a></li> 12 <li><a href="#"><p class="sub-drop_title">2</p><div class="arrow"></div></a></li> 13 </ul> 14 </li> 15</ul> 16</div> 17

投稿2017/06/22 06:33

編集2017/06/22 06:34
yambejp

総合スコア114585

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

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

yamaoka

2017/06/22 07:15

おぉ!すごい!! まさにやりたかったことです。コード参考にさせていただきます。ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問