Нажатие кнопки 1 активирует оба выпадающих

Question

Когда я нажимаю одну из раскрывающихся кнопок, она активирует оба раскрывающихся списка. Я пытаюсь сделать так, чтобы при нажатии на одну из выпадающих кнопок он только активировал свой конкретный выпадающий список. Я думал, что использование функции .each () в jQuery исправит это, но я, скорее всего, использую это неправильно. Спасибо всем за помощь!

Вот ссылка JSFiddle на проблему

HTML

<div class="mobile-menu">
  <nav>
    <ul>
      <li>
        <a>Item 1</a>
        <div class="drop">
          Click To Drop
        </div>
        <ul class="nav-dropdown">
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
        </ul>
      </li>
      <li>
        <a>Item2</a>
        <div class="drop">
          Click To Drop
        </div>
        <ul class="nav-dropdown">
          <li>
            <a>Sub-item</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

SCSS

.drop {
  cursor: pointer;
}

.mobile-menu {
    ul {
        list-style-type: none;
        margin: 0;

        li {
            padding-bottom: 25px;
            position: relative;

            a {
                font-size: rem-calc(30px);
                text-transform: uppercase;
                font-weight: bold;
            }

            .nav-dropdown {
                position: relative;
                box-shadow: none;
                background: none;
                height: 100%;
                display: none;
                width: unset;

                li {
                    float: none;
                    max-width: unset;

                    a {
                        font-size: rem-calc(20px);
                        font-weight: normal;
                    }
                }
            }
        }
    }
}

.nav-dropdown-active {
    display: block !important;
}

JQuery

$('.drop').each(function() {
    $(this).click(function() {
      $('.mobile-menu .nav-dropdown').toggleClass('nav-dropdown-active');
    });
});

Answer 1

Проблема в том, что: с помощью $('.mobile-menu .nav-dropdown') вы выбираете все nav-dropdown в элементе mobile-menu. Поэтому вам нужно использовать $(this) для ссылки на нажатой drop, а затем .next(), чтобы получить следующий ul.nav-dropdown

• $(this).next('.nav-dropdown') ИЛИ $(this).closest('li').find('ul')

• Также не нужно использовать .each()

---

$('.drop').click(function() {
   $(this).next('.nav-dropdown').toggleClass('nav-dropdown-active');
});

И Чтобы закрыть другие nav-dropdown, вы можете просто использовать $('.nav-dropdown').removeClass('nav-dropdown-active');

$('.drop').click(function() {
   $('.nav-dropdown').not($(this).next('.nav-dropdown')).removeClass('nav-dropdown-active');
   $(this).next('.nav-dropdown').toggleClass('nav-dropdown-active');
});

• Используя .not($(this).next('.nav-dropdown')), вы не сможете выбрать нужный раскрывающийся список для удаления класса с другим раскрывающимся списком. Эта часть поможет, если у вас есть transition или animation с вашим активным классом