Как доработать код?

Question

[Антон]

Накидал такой код для меню: 4 "раскрывашки"
клик по menu_link раскроет us_menu и скроет другие раскрытые менюшки
клик вне области скроет все менюшки
Вопроса к знатокам два:
1. Как этот код привести в божеский вид, а не городить "многоэтажку"
2. Как добавить: если меню раскрыто, то клик на свой же селектор скроет своё меню? (сейчас меню скрывается, если развернуть соседнее меню) Т.е. если us_menu = flex, то клик по menu_link должен скрыть us_menu.

spoiler

$(document).mouseup(function (e) {
$("#us_menu").css('display','none');
$("#us_menu2").css('display','none');
$("#us_menu3").css('display','none');
$("#us_menu4").css('display','none');
});
$(document).ready(function(){
$("#menu_link").click(function () {
if ($("#us_menu").is(":hidden")) {
$("#us_menu").css('display','flex');
$("#us_menu2").css('display','none');
$("#us_menu3").css('display','none');
$("#us_menu4").css('display','none');
 } else {
$("#us_menu").css('display','none');
}
 return false;
});
});
$(document).ready(function(){
$("#menu_link2").click(function () {
if ($("#us_menu2").is(":hidden")) {
$("#us_menu").css('display','none');
$("#us_menu2").css('display','flex');
$("#us_menu3").css('display','none');
$("#us_menu4").css('display','none');
 } else {
$("#us_menu2").css('display','none');
}
 return false;
});
});
$(document).ready(function(){
$("#menu_link3").click(function () {
if ($("#us_menu3").is(":hidden")) {
$("#us_menu").css('display','none');
$("#us_menu2").css('display','none');
$("#us_menu3").css('display','flex');
$("#us_menu4").css('display','none');
 } else {
$("#us_menu3").css('display','none');
}
 return false;
});
});
$(document).ready(function(){
$("#menu_link4").click(function () {
if ($("#us_menu4").is(":hidden")) {
$("#us_menu").css('display','none');
$("#us_menu2").css('display','none');
$("#us_menu3").css('display','none');
$("#us_menu4").css('display','flex');
 } else {
$("#us_menu4").css('display','none');
}
 return false;
});
});

html условно

spoiler

<a id="menu_link" class="nav-link h">МЕНЮ 1</a>
<div id="us_menu" class="vision" style="display: none;">
<ul><li>.....</li></ul>
</div>
<a id="menu_link2" class="nav-link h">МЕНЮ 2</a>
<div id="us_menu2" class="vision" style="display: none;">
<ul><li>.....</li></ul>
</div>.....

Comments

[Никита Егоров]

Приложите html

[Антон]

Никита Егоров, обновил описание

Answer 1

[Антон]

$(document).mouseup(function (e) {
$("#us_menu").css('display','none');
$("#us_menu2").css('display','none');
$("#us_menu3").css('display','none');
$("#us_menu4").css('display','none');
});

убрал эту часть, теперь второй пункт из задачи решён.

Answer 2

[slii]

Все гораздо проще

var i = 0;
$(".nav-link").click(function(e) {
 e.preventDefault;
  i += 1;
	$(".vision").css("display", "none");
  var usm = $(this).next(".vision");
  if ( i & 1 ) {
      usm.css("display","flex");
  }
  else {
      usm.css("display","none");
  }
})

Answer 3

[sloupok123]

вариант ответа: https://jsfiddle.net/9u1y2eo8/47/
немного переделал ваш html, чтобы дивы меню были вложены в ссылки.