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

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

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

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

下記のようなコードなのですが、どこを改善すればよいでしょうか？
どこがネックになっているかわからなかったので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);
}


```

x_x

2017/06/22 05:25

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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