toggleを使って下層ページのメニューを表示させる

Question

jQueryのtoggleメソッドを使って下層ページのメニューをonClickで表示したいと思っています。
表示させるところまでは出来たのですが、欄外（該当のメインメニューボタンと下層ページへのリンクボタン以外）をクリックしたときに下層ページへのメニューボタンが消えるようにしたいのと、メインメニューボタンをクリックしたときに文字に色が付くようにしたいと思っています。
いくつか方法は見つけたのですがそれをどうやってくっつけてスクリプトを完成させればよいのかがプログラミングは全くの初心者で分からないので教えていただければ嬉しいです。

<ul class="gnav">
  <li class="menu01"><a>memu01</a></li>
  <li class="menu02"><a>memu02</a></li>
  <li class="menu03"><a>memu03</a></li>
  <li class="menu04"><a>memu04</a></li>
</ul>

<ul class="low-nav01">
  <li class="low-menu01"><a href="low-memu01.html">low-memu01</a></li>
  <li class="low-menu02"><a href="low-memu02.html">low-memu02</a></li>
  <li class="low-menu03"><a href="low-memu03.html">low-memu03</a></li>
  <li class="low-menu04"><a href="low-memu04.html">low-memu04</a></li>
</ul>

<ul class="low-nav02">
  <li class="low-menu01"><a href="low02-memu01.html">low-memu01</a></li>
  <li class="low-menu02"><a href="low02-memu02.html">low-memu02</a></li>
  <li class="low-menu03"><a href="low02-memu03.html">low-memu03</a></li>
  <li class="low-menu04"><a href="low02-memu04.html">low-memu04</a></li>
</ul>

ul {
display: flex;
justify-contents: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
li {
width: calc(100%/4);
li.active {
color: #f3c50f;
}

$(function() {
    $('li.menu01 a').click(function(){
        $('.low-nav01').toggle();
    });
  });

$(function() {
    $('li.menu02 a').click(function(){
        $('.low-nav02').toggle();
    });
  });

$(function() {
    $('li.menu03 a').click(function(){
        $('.low-nav03').toggle();
    });
  });

$(function() {
    $('li.menu04 a').click(function(){
        $('.low-nav04').toggle();
    });
  });

//色を変えるなら下記？
$(function(){
　　$(".gnav li a").click(function () {
　　　$(".gnav li a").removeClass("active");
　　　$(this).addClass("active");
　　});
　})
//範囲以外をクリックしたら消える？
$('.gnav li a').click(function(event) {  
  event.stopPropagation();  
});

自分で調べてみてなんとなくくっつけてみたりしたもののなかなかうまくいきません。どなたかお教えいただけると嬉しいです。
toggleでメニューを出す部分ももっと簡単にまとめて書けるのかもしれませんが、なにせデザイン専門なためどのようにまとめれば良いかも分からないので何かアドバイスいただければ嬉しいです。

Answer 1

簡単のため共通クラスlow-navをつけておき、

<ul class="low-nav low-nav01">
  <li class="low-menu01"><a href="low-memu01.html">low-memu01</a></li>
  <li class="low-menu02"><a href="low-memu02.html">low-memu02</a></li>
  <li class="low-menu03"><a href="low-memu03.html">low-memu03</a></li>
  <li class="low-menu04"><a href="low-memu04.html">low-memu04</a></li>
</ul>
<!-- 以下略 -->

$(document).on('click', function(event) {
  var contains = false;
  $('ul.gnav,low-nav').each(function(index, element) {
    if ($.contains(element, event.target)) {
      contains = true;
      return false;
    }
  });

  if (!contains) {
    // 範囲外。
    $('.gnav li a.active').removeClass('active');
    $('.low-nav').hide();
  }
});

なお、CSSが一部おかしいので{}に気を付けてみてください。

Comments

[Yucchi]

ありがとうございました！無事やりたかった動きになりました。
しかしなぜかボタンの色がクリックしたときに代わらないのでその部分お分かりになりましたらお教えいただけると嬉しいです。

[x_x]

ちらと書きましたが、"width: calc(100%/4);"の後ろに}がありません。

[Yucchi]

ありがとうございました！

Answer 2

なにで紐付けするかによります
たとえばindexを利用すればこう

$(function(){
  $('.gnav li').on('click',function(){
    var idx=$('.gnav li').index(this);
    $('.low-nav').eq(idx).toggle();
  });
});

<ul class="gnav">
  <li class="menu01"><a>memu01</a></li>
  <li class="menu02"><a>memu02</a></li>
  <li class="menu03"><a>memu03</a></li>
  <li class="menu04"><a>memu04</a></li>
</ul>

<ul class="low-nav">
  <li class="low-menu01"><a href="low-memu01.html">low-memu11</a></li>
  <li class="low-menu02"><a href="low-memu02.html">low-memu12</a></li>
  <li class="low-menu03"><a href="low-memu03.html">low-memu13</a></li>
  <li class="low-menu04"><a href="low-memu04.html">low-memu14</a></li>
</ul>
<ul class="low-nav">
  <li class="low-menu01"><a href="low-memu01.html">low-memu21</a></li>
  <li class="low-menu02"><a href="low-memu02.html">low-memu22</a></li>
  <li class="low-menu03"><a href="low-memu03.html">low-memu23</a></li>
  <li class="low-menu04"><a href="low-memu04.html">low-memu24</a></li>
</ul>
<ul class="low-nav">
  <li class="low-menu01"><a href="low-memu01.html">low-memu31</a></li>
  <li class="low-menu02"><a href="low-memu02.html">low-memu32</a></li>
  <li class="low-menu03"><a href="low-memu03.html">low-memu33</a></li>
  <li class="low-menu04"><a href="low-memu04.html">low-memu34</a></li>
</ul>
<ul class="low-nav">
  <li class="low-menu01"><a href="low-memu01.html">low-memu41</a></li>
  <li class="low-menu02"><a href="low-memu02.html">low-memu42</a></li>
  <li class="low-menu03"><a href="low-memu03.html">low-memu43</a></li>
  <li class="low-menu04"><a href="low-memu04.html">low-memu44</a></li>
</ul>