Выпадающее меню - только одно открытое меню за раз

Question

У меня есть эта функция для нескольких выпадающих меню:

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
    $(this).parent(".sub-menu").children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

Это работает: выпадающее меню фактически выпадает, и это нормально, я просто хотел бы, чтобы оно автоматически закрывалось / скрывалось, когда пользователь нажимал на Следующее меню ... Я бы хотел, чтобы в это время открывалось только раскрывающееся меню, иначе само меню будет слишком высоким!

Это код, над которым я работаю: https://codepen.io/amsteldroid/pen/NoBYye

Поскольку вы видите, что все раскрывающиеся меню остаются открытыми, я бы хотел, чтобы только одно открывалось одновременно.

$('.sub-menu ul').hide();
$(".sub-menu a").click(function() {
  $(this).parent(".sub-menu").children("ul").slideToggle("100");
  $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

body {
  background-color: #fff;
  font-size: 14px;
}

nav {
  position: relative;
  margin: 50px;
  width: 360px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  /* Sub Menu */
}

nav ul li a {
  display: block;
  background: #ebebeb;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}

nav ul li a:hover {
  background: #f8f8f8;
  color: #515151;
}

nav ul li a .fa {
  width: 16px;
  text-align: center;
  margin-right: 5px;
  float: right;
}

nav ul ul {
  background-color: #ebebeb;
}

nav ul li ul li a {
  background: #f8f8f8;
  border-left: 4px solid transparent;
  padding: 10px 20px;
}

nav ul li ul li a:hover {
  background: #ebebeb;
  border-left: 4px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated bounceInDown'>
  <ul>
    <li><a href='#profile'>Profile</a></li>
    <li><a href='#message'>Messages</a></li>
    <li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
      <ul>
        <li><a href='#settings'>Account</a></li>
        <li><a href='#settings'>Profile</a></li>
        <li><a href='#settings'>Secruity &amp; Privacy</a></li>
        <li><a href='#settings'>Password</a></li>
        <li><a href='#settings'>Notification</a></li>
      </ul>
    </li>
    <li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
      <ul>
        <li><a href='#settings'>FAQ's</a></li>
        <li><a href='#settings'>Submit a Ticket</a></li>
        <li><a href='#settings'>Network Status</a></li>
      </ul>
    </li>
    <li><a href='#message'>Logout</a></li>
  </ul>
</nav>

Answer 1

Это было не тривиально и невозможно до тех пор, пока вы не опубликовали HTML

Я изменил div на span

Мне пришлось переместить открытие / закрытие за пределы завершения " другое "закрытие", поскольку оно, конечно, переключало бы текущий элемент друг на друга, который был закрыт

$('.sub-menu ul').hide();
$(".sub-menu a").click(function(e) {
  e.stopPropagation()
  const $parentLI = $(this).closest("li");
  const $other = $parentLI.siblings();
  const $myUL = $parentLI.find("ul");
  const $myToggle = $(this).find(".right");
  $other
    .find("ul").slideUp("100")
    .find("a span").removeClass("fa-caret-up").addClass("fa-caret-down");
  $myUL.slideToggle("100");
  $myToggle.toggleClass("fa-caret-up fa-caret-down");

});

body {
  background-color: #fff;
  font-size: 14px;
}

nav {
  position: relative;
  margin: 50px;
  width: 360px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  /* Sub Menu */
}

nav ul li a {
  display: block;
  background: #ebebeb;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}

nav ul li a:hover {
  background: #f8f8f8;
  color: #515151;
}

nav ul li a .fa {
  width: 16px;
  text-align: center;
  margin-right: 5px;
  float: right;
}

nav ul ul {
  background-color: #ebebeb;
}

nav ul li ul li a {
  background: #f8f8f8;
  border-left: 4px solid transparent;
  padding: 10px 20px;
}

nav ul li ul li a:hover {
  background: #ebebeb;
  border-left: 4px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<nav class='animated bounceInDown'>
  <ul>
    <li><a href='#profile'>Profile</a></li>
    <li class='sub-menu'><a href='#settings'>Messages<span class='fa fa-caret-down right'></span></a>
      <ul>
        <li><a href='#settings'>Message 1</a></li>
        <li><a href='#settings'>Message 2</a></li>
        <li><a href='#settings'>Message 3</a></li>
      </ul>
    </li>
    <li class='sub-menu'><a href='#settings'>Settings<span class='fa fa-caret-down right'></span></a>
      <ul>
        <li><a href='#settings'>Account</a></li>
        <li><a href='#settings'>Profile</a></li>
        <li><a href='#settings'>Secruity &amp; Privacy</a></li>
        <li><a href='#settings'>Password</a></li>
        <li><a href='#settings'>Notification</a></li>
      </ul>
    </li>
    <li class='sub-menu'><a href='#message'>Help<span class='fa fa-caret-down right'></span></a>
      <ul>
        <li><a href='#settings'>FAQ's</a></li>
        <li><a href='#settings'>Submit a Ticket</a></li>
        <li><a href='#settings'>Network Status</a></li>
      </ul>
    </li>
    <li><a href='#message'>Logout</a></li>
  </ul>
</nav>