jQueryのドロップダウンリストで、指定した箇所をクリックすると閉じる仕様にしたい。

Question

前提・実現したいこと

jQueryのドロップダウンリストで、指定した箇所をクリックすると閉じる仕様にしたいです。

３階層のドロップダウンメニューを作成中です。
div.main_manuをクリックで２階層目が、li.ptをクリックで３階層目が表示されるようになっております。
リストの領域意外と他のリストが表示されたら、現在のリストは閉じるようにしました。

ここまでは問題なくできたのですが、div.main_menuをクリックしてもメニューが閉じません。
ここをクリックしてもリストが閉じるようにするには、どこを修正すれば良いでしょうか。

初歩的な質問かもしれませんがよろしくお願いいたします。

発生している問題・エラーメッセージ

div.main_manu部分をクリックしても閉じない。

該当のソースコード

<ul id="menu">
<li><div class="main_menu">北海道・東北</div>
<ul class="sub_menu">
<li class="pt"><span class="pt-span">北海道</span>																	<ul class="third_menu">
<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="hakodateshi" name="area_cat[]" value="hakodateshi"><span>函館市</span></label></li>																	<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="hakodateshi" name="area_cat[]" value="hakodateshi"><span>函館市</span></label></li>
<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="hakodateshi" name="area_cat[]" value="hakodateshi"><span>函館市</span></label></li>
</ul><!--third_menu-->
</li><!--pt-->
<li class="pt"><span class="pt-span">青森県</span>																	<ul class="third_menu">
<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="hachinoheshi" name="area_cat[]" value="hachinoheshi"><span>八戸市</span></label></li>																	<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="hachinoheshi" name="area_cat[]" value="hachinoheshi"><span>八戸市</span></label></li>
<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="hachinoheshi" name="area_cat[]" value="hachinoheshi"><span>八戸市</span></label></li>
</ul><!--third_menu-->
</li><!--pt-->
</ul><!--sub_menu-->
</li>
<li><div class="main_menu">関東</div>
<ul class="sub_menu">
<li class="pt"><span class="pt-span">東京都</span>																	<ul class="third_menu">
<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="chuoku" name="area_cat[]" value="chuoku"><span>中央区</span></label></li>																	<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="chuoku" name="area_cat[]" value="chuoku"><span>中央区</span></label></li>
<li><label class="label--checkbox"><input type="checkbox" class="checkbox" id="chuoku" name="area_cat[]" value="chuoku"><span>中央区</span></label></li>
</ul><!--third_menu-->
</li><!--pt-->
</ul><!--sub_menu-->
</li>
</ul>

<script>
$(function () {
  $('.main_menu').click(function() { 
    if ($(this).attr('class') == 'selected') {
      $(this).removeClass('selected').next('.sub_menu').slideUp('fast');
    } else {
      $('.main_menu').removeClass('selected');
      $('.sub_menu').hide();
      $(this).addClass('selected').next('.sub_menu').slideDown('fast');
    }    
  });

  // 子メニュー処理
  $('.pt').click(function(e) {
    $(this).children('.third_menu').slideToggle('fast');
    e.stopPropagation();
  });
	
$('.main_menu,.sub_menu,.third_menu').hover(function(){
    over_flg = true;
  }, function(){
    over_flg = false;
  });
	
  $('body').click(function() {
    if (over_flg == false) {
      $('.sub_menu,.third_menu').slideUp('fast');
    }
  });
});
</script>

Comments

[yambejp]

「北海道・東北」をクリックすると「北海道」は閉じるのでしょうか？そのままでしょうか？
函館市のチェックボックスはクリックしてもなにもしなくていいのでしょうか？

[iambeginnerr]

「北海道・東北」をクリックしてから、「北海道」をクリックして展開後、クリックすると閉じます！函館市のチェックボックスはクリックすると、third_menuごと閉じています！

Answer 1

$(function () {
  $('.main_menu,.pt-span').on('click',function(){
    $(this).next().slideToggle();
  });
});

Comments

[yambejp]

場合によってはdetails/summaryで処理してもよいかもしれません

[iambeginnerr]

回答いただきありがとうございます！
教えていただいたコードを追加してみたのですが、.main_menuをクリックと同時に展開し一瞬で閉じてしまいます...

[yambejp]

sampleをcodepenにあげました、動作確認ください

https://codepen.io/yambejp/pen/oNLZZwP

想定と動作が違うようでしたら、正しい動作を説明ください

[iambeginnerr]

sampleを作成いただきありがとうございます！
codepenでの動き（.main_menuとli.ptをクリックでリストが閉じる）＋一つのリストが開いているときは他のリストが閉じる＋リストエリア以外の場所をクリックすると開いていたリストが閉じる　という３つの動きを装備したいと考えております。

経過を申し上げますと、始めは、codepenにあげていただいたような動き（一つづつ項目をクリックで閉じる）ができていたのですが、「一つのリストが開いているときは他のリストが閉じる＋リストエリア以外の場所をクリックすると開いていたリストが閉じる」という動きの追加を試みていたところ、「項目をクリックして閉じる」という動きが作動しなくなった、という流れです。
言葉足らずですみません。伝わりましたでしょうか。

[yambejp]

なるほど「他のリストが閉じる」の他のリストが例示されていないのでそこが抜けてますね
HTMLだけいいのでもう少しサンプル量を増やしてください

[yambejp]

codepen更新しましたVer2確認ください

[iambeginnerr]

再度更新いただきありがとうござます！
「項目をクリックして閉じる」と「つのリストが開いているときは他のリストが閉じる」は無事実装できました！ここに「リストエリア以外の場所をクリックすると開いていたリストが閉じる」という動作を追加することは難しいのでしょうか。
以下のコードを単純に追加してみましたが、ダメでした。
$('body').click(function() {
if (over_flg == false) {
$('.sub_menu,.third_menu').slideUp('fast');
}
});

[yambejp]

codepen更新しました(ver3)

[iambeginnerr]

度々更新していただきありがとうございます！
全て目指していた動作になりました！
記載の仕方もスマートで勉強になります。
ありがとうございました。