【jQuery】ドロップダウンメニューの作り方【クリックやhoverで開閉】

      <ul class="menu" id="mega_menu">
     
        <!-- メニュー（親） -->
        <!-- マウスをhoverすると下にメガメニューのコンテンツが現れる -->
        <li class="menu-parent">
　　　　　　<!-- メニュー（兄） -->
          <a href="#" class="menu-parent_a">和食メニュー</a>    
          <!-- メガメニュー（弟） -->
          <!-- 通常は非表示／マウスhoverでメニュー（親）のメガメニュー（子）が現れる -->
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">サンマ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ホッケ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">刺し身定食</a>
              </li>
            </ul>
          </div>
        </li>
       
        <li class="menu-parent">
          <a href="#" class="menu-parent_a blrn">洋食メニュー</a> 
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">豚生姜焼き定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ロースカツ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ハンバーグ定食</a>
              </li>
            </ul>
          </div>
        </li>
       
        <li class="menu-parent">
          <a href="#" class="menu-parent_a">麺類メニュー</a> 
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">醤油ラーメン</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">味噌ラーメン</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">豚骨ラーメン</a>
              </li>
            </ul>
          </div>
        </li>
       
      </ul>

/* --------------------------- */
/* メニュー（兄）のスタイル */
/* --------------------------- */
.menu {
  display: flex;
  background-color: #370617;
  color: #fff;
}
.menu-parent {
  width: calc(100% /3);
  border-right: 1px solid #ccc;
  position: relative;
}
.menu-parent:last-child {
  border-right: 0;
}
.menu-parent_a {
  display: block;
  padding: 10px;
  text-align: center;
}
.menu-parent_a.blrn{
  border-left: none;
  border-right: none;
}
/* --------------------------- */
/* メニュー（兄）の動作に直接関係する箇所 */
/* --------------------------- */
/* メニュー（兄）hover時に色を変える */
@media (hover: hover) {
  .menu-parent_a:hover{
    background-color: #9d0208;
    transition: all .1s;
  }
}
/* メニュー（兄）にactive付与されたとき色を変える */
.menu-parent_a.active{
  background-color: #9d0208;
}
 /* --------------------------- */
/* メガメニュー(弟)のスタイル */
/* --------------------------- */
/* メニュー（弟）は普段は非表示 */
.menu-child {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #ffbf69;
  color: #333;
}
.menu-child_ul{
  list-style-type: disc;
  padding-left: 1.5em;
}
.menu-child_li {
  line-height: 2;
}

$(function () {
  // メニュー（兄）をクリックしたら  
  $('.menu-parent_a').click(function () {
    // メガメニュー（弟）をスライドダウンまたはアップ
    $(this).siblings('.menu-child').slideToggle(300);
    // メニュー（兄）にactiveクラスを付与     
    $(this).addClass('active');
    // 別の兄弟のメガメニュー（弟）をスライドアップで非表示  
    $('.menu-parent_a').not($(this)).siblings('.menu-child').slideUp(100);
    // 別の兄弟のメニュー（兄）からactiveクラスを取り去る 
    $('.menu-parent_a').not($(this)).removeClass('active');

  });
   // メガメニューのリンク以外の場所をクリックしたらメガメニュー（弟）がスライドアップ・メニュー（兄）からactiveクラスを剥奪
  $(document).on('click touchend', function (e) {
    if (!$(e.target).closest('.menu-parent_a').length) {
      $('.menu-parent_a').removeClass('active');
      $('.menu-child').slideUp(100);
    }
  });
});