Скрыть текущее подменю при нажатии другого пункта меню

Question

Я создал заголовок, в котором у меня есть подменю и все.Если я нажимаю на меню, где у меня есть подменю для этих меню, оно работает нормально.Но проблема в том, что когда я нажимаю на другое меню, в котором есть подменю, предыдущее, которое мы щелкнули, не скрывается.Оба меню отображают, что является активным и неактивным режимом.Вот код, который я написал:

//Javascript Code:
$('.main-menu li a + ul').prev('a').append('<span class="caret"></span>');
$('.main-menu ul li a').click(function (e) {
  if ($(this).next().hasClass('sub-menu')) {
    e.preventDefault();
    // $('.sub-menu').slideUp(); // <--- This is the culprit
    $('.main-menu ul li a').removeClass('active');
    if ($(this).next('.sub-menu').is(':visible')) {
      $(this).removeClass('active');
      $(this).next('.sub-menu').slideUp();
    } else {
      $(this).addClass('active');
      $(this).next('.sub-menu').slideToggle();
    }
  }
});

/*CSS:*/
.main-menu {
  width: 100%;
  position: relative;
}

.main-menu ul {
  list-style: none;
  font-size: 0;
  line-height: 0;
  text-align: right;
}

.main-menu ul li {
  display: inline-block;
  vertical-align: top;
}

.main-menu ul li a {
  padding: 42px 25px;
  color: #898E94;
  display: block;
  font-size: 16px;
  line-height: 18px;
  font-family: 'Roboto_reg';
}

.side-nav {
  width: 340px;
  right: 0;
  position: absolute;
  background-color: #222222;
  top: 100px;
  z-index: 10;
  display: none;
  height: auto;
}

.side-nav ul li li a {
  padding-left: 70px;
  font-family: 'source_sans_proregular';
}

.side-nav ul li a:hover {
  background-color: #ff3c1f;
  cursor: pointer;
}

.side-nav ul li a {
  color: white;
  font-size: 16px;
  line-height: 24px;
  padding: 15px 50px;
  display: block;
  position: relative;
  border-top: 1px solid transparent;
}

.side-nav.active {
  display: block;
}

.side-nav ul li ul {
  border-bottom: 1px solid rgba(255, 60, 31, 0.3);
  padding-bottom: 30px;
}

.side-nav ul li a.active {
  border-color: rgba(255, 60, 31, 0.3);
}

.sub-menu {
  display: none;
}

.side-nav ul li {
  position: relative;
}

.caret {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 20px;
  right: 65px;
  border: 0;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.sub-menu li a {
  padding: 10px 25px !important;
  line-height: 0px !important;
  margin-top: -22px;
}

.sub-menu li a {
  margin-left: -237px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML: -->
<div class="main-menu">
   <ul id="menu-main-menu" class="menu">
      <li  class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li>
      <li  class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
      <li  class="menu-item">
         <a href="#" ><span>Menu3</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li>
         </ul>
      </li>
      <li class="menu-item">
         <a href="#"><span>Other Links</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="http://localhost/bar/sumenu8/" ><span>Submenu8</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li>
         </ul>
      </li>
      <li  class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
   </ul>
</div>

Он не отображает значок стрелки, а также работает нормально на мобильных устройствах, но вызывает проблемы на настольных компьютерах.

Answer 1

Я отредактировал ваш код JavaScript, чтобы включить и скрыть другие активные подменю.

Редактировать: отредактировано CSS, чтобы исправить макет.

$('.main-menu ul li a').click(function (e) {
  // remove the active class with every click
  var same = $(this).hasClass('active');
  var siblings = $(this).parent('.menu-item').parent().children();
  siblings.find('a.active + .sub-menu').slideUp();
  siblings.find('a').removeClass('active'); 
  
  if ($(this).next().hasClass('sub-menu') && !same) {
    e.preventDefault();
    $(this).addClass('active');
    $(this).next('.sub-menu').slideDown();
  }
});

/*CSS:*/
.main-menu {
  width: 100%;
  position: relative;
}

.menu {
  list-style-type: none;
}

.menu-item {
  position: relative;
  display:inline-block;
  padding-right: 20px;
}

.sub-menu {
  padding-left: 0;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.sub-menu.level-2 {
  left: 100%;
}

.caret {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: #000 transparent transparent transparent;
}

.menu-item a.active .caret {
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #000 transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML: -->
<div class="main-menu">
   <ul id="menu-main-menu" class="menu">
      <li  class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li>
      <li  class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
      <li  class="menu-item">
         <a href="#" ><span>Menu3</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li>
         </ul>
      </li>
      <li class="menu-item">
         <a href="#"><span>Other Links</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="#">
              <span>Other Links</span><span class="caret"></span></a>
               <ul class="sub-menu level-2">
                 <li  class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>SubSubMenu</span></a></li>
               </ul>
             </li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li>
         </ul>
      </li>
      <li  class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
   </ul>
</div>