Проблема с закрытием выпадающего меню

@Jagerjag96 · Регистрация: 25.10.2020

Author24 — интернет-сервис помощи студентам

Помогите решить проблему с падающим меню. Демонстрация здесь: jsfiddle.net. Нужно чтоб при открытии второго выпадающего меню первое сворачивалось, так же при нажатии на любое другое место на странице так же свернулось. Заранее благодарю!

HTML5

<body>
  <nav>
    <ul class="menu">
      <li class="menu__item">
        <a href="#" class="menu__link">Title 1</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Title 2</a>
        <ul class="sub">
          <li>
              <a href="#">Subtitle 1</a>
          </li>
          <li>
              <a href="#">Subtitle 2</a>
          </li>
          <li>
              <a href="#">Subtitle 3</a>
          </li>
          <li>
            <a href="#">Subtitle 4</a>
          </li>
        </ul>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Title 3</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Title 4</a>
        <ul class="sub">
          <li>
            <a href="#">Subtitle 1</a>
          </li>
          <li>
            <a href="#">Subtitle 2</a>
          </li>
          <li>
            <a href="#">Subtitle 3</a>
          </li>
          <li>
            <a href="#">Subtitle 4</a>
          </li>
        </ul>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Title 5</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Title 6</a>
      </li>
    </ul>
  </nav>
</body>

CSS

* {
  padding: 0;
  margin: 0;
}
 
li {
  list-style: none;
}
 
a {
  text-decoration: none;
  color: white;
}
 
.menu {
  display: flex;
  background: black;
}
 
.menu__item {
  position: relative;
}
 
.menu__link {
  padding: 10px 15px;
}
 
.sub {
  background: grey;
  position: absolute;
  top: 18px;
  left: 0px;
  width: 100px;
  display: none;
}
 
.sub li a {
  padding: 10px;
}

Javascript

1
2
3

$(".menu__link").click(function() {
    $(this).next(".sub").slideToggle()        
})

@j2FunOnly · 09.03.2021, 09:58

Javascript

$(".menu__link").click(function(e) {
  $('.sub').slideUp();
  $(this).next(".sub").slideToggle();
  e.stopPropagation();
});
 
$('body').click(function(e) {
  $('.sub').slideUp();
});

	09.03.2021, 09:58

Опции темы