アコーディオンメニューのアイコンが上手く動作しない

Question

アコーディオンメニューのアイコンをプラス、マイナス、にしています。
そして一つ開いたら他のメニューは閉じるようにしてあります。
一つ開いたら他のメニューは閉じるようになるのはできいるのですが、その時アイコンが
閉じてもマイナスのままになてしまっています。
どこが間違っていますか？教えてください。。

<ul class="menu">
      <li class="menu__item">
        <a class="menu__item__link js-menu__item__link" href="#">メールBOX</a>
        <ul class="submenu">
            <li class="submenu__item">
                <a href="">送信メール</a>
            </li>
            <li class="submenu__item">
                <a href="">受信メール</a> 
            </li>
        </ul>
    </li>
 </ul>   
<script>
$(function(){
    $('.js-menu__item__link').each(function(){
        $(this).on('click',function(){
            $(this).toggleClass('on');
            $("+.submenu",this).slideToggle();
			return false;
	       //一つ開いたら後は閉じる 
	$('.js-menu__item__link').not($(this)).siblings('.submenu').slideUp();	
        });
    });
});

</script>

ここからｃｓｓです

.menu {
	width:100%;
	padding-left:0px;
	margin-top:3px;
	}	
.menu__item {
  background:#009FFF;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 3px;
}
.menu__item a{
	text-decoration: none;
	}
.menu__item li{
	list-style:none;
	}
.menu__item__link {
  color:#000;
  display: block;
  line-height: 60px;
  padding: 0 1rem;
  position: relative;
}
.menu__item__link:after {
  background:#009FFF;
  content: '\f067';
  font-weight: 900;
  display: block;
  font-family: "Font Awesome 5 Free";
  line-height: 60px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 60px;
}
.menu__item__link.on:after {
  content: '\f068';
}
  
.submenu {
  background: #fff;
  display: none;
}
.submenu__item {
  border-bottom: 1px solid #009FFF;
  color:#000;
  padding: 1rem;
}

Comments

[m.ts10806]

HTMLが半端な状態、
CSSが提示されていない
ということもあり、他者に指摘できることはありません。
質問を編集し、第三者がコピペで再現できる情報を提示してください。

[ayuayuayu]

ｃｓｓも載せました。宜しくお願いします。

[Lhankor_Mhy]

実際には、.menu__item が複数ある、ということでいいんですよね？

Answer 1

こんにちは。

こう変更してはいかがでしょうか。
ただ、returnの前に書かないと動かないと思いますが……

//  $('.js-menu__item__link').not($(this)).siblings('.submenu').slideUp();
    $('.js-menu__item__link').not($(this)).removeClass('on').siblings('.submenu').slideUp(); 

Comments

[ayuayuayu]

ありがとうございます。
すぐにできました！！！