アコーディオンメニューをリンク先で開いたままにしたい

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();
        
   	       //一つ開いたら後は閉じる 
	$('.js-menu__item__link').not($(this)).removeClass('on').siblings('.submenu').slideUp();
     	return false;
	
//ここから開いておくコードを検索して書いてみました。。。
  $('submenu__item').hide();
  $('a[href^="#"').on('click',function(){
    $('.submenu__item').hide();
    $($(this).attr('href')).next('.submenu__item').show();
	
	 
  });
        });
    });
});

</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;
}