Переключить список, чтобы закрыть его

Question

У меня есть много li в этом мобильном меню. Я пытаюсь закрыть эти кнопки, когда снова нажимаю на них. Я заставил их нормально открываться с помощью класса 'show', но класс div не закрывается снова, когда я нажимаю на него. Есть идеи, что происходит?

Я пытался получить его, когда нажимал go на родителя (li) и находил потомка с именем .dropdown-submenu - dp-0, а затем переключал класс show. Но это не переключается. Только добавляет.

<li id="menu-item-3291" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3291 nav-item dropdown">
   <a href="/OrganicDirect" class="nav-link dropdown-toggle--submenu dropdown-toggle--submenu--dp-0">Solutions</a>

   <div class="dropdown-submenu dropdown-submenu--dp-0">
    <a href="/solutions" class="nav-link dropdown- 
     item">Identity Platform Overview</a>
   </div>
</li>

</div>

  $('.dropdown-toggle--submenu').on('click', function(e){

// to close all lis and then only open the one selected.
    $('.dropdown-toggle--submenu').each(function(){
      $('.dropdown-submenu').removeClass('show');

    })

// toggle show
   $(e.target).parent().find('.dropdown-submenu--dp-0').toggleClass('show');
  });

Answer 1

Вы должны использовать $ (this)

см .: https://api.jquery.com/each/

$(this).removeClass('show');

Если вы хотите удалить шоу класса.

Однако для переключения (обратной) видимости с jquery используйте https://api.jquery.com/toggle/ Или, если вы определенно хотите скрыть видимые элементы, используйте https://api.jquery.com/hide/