Избегайте раскрывающегося элемента подменю, чтобы закрыть основной раскрывающийся список при нажатии

Question

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

Вот мой HTML:

  <aside class="layout-sidebar">
    <nav class="mainSidebar navbar navbar-expand-lg" role="navigation">                              
      <div class="collapse navbar-collapse" id="js-MainNavigation">               
        <ul class="navPrimary">
          <li class="is-active">
            <a href="#" class="home">Inici</a>
          </li>
          <li class="dropdownItem">
            <a href="#" class="imi">L'IMI</a>
            <div class="subMenu">
              <div class="subMenu__content">
                <ul class="subMenu__content-list">
                  <li><a href="#">Ets Nou A L'IMI</a></li>
                  <li><a href="#">Coneix L'IMI</a></li>
                  <li><a href="#">Persones I Funcions</a></li>
                  <li><a href="#">Organigrama</a></li>
                  <li><a href="#">Direccions</a></li>
                  <li><a href="#">Proveidors</a></li>
                  <li><a href="#">Directori De Sales</a></li>
                  <li><a href="#">Espais Fisics</a></li>
                </ul>
              </div>
            </div> 
          </li>
          <li class="dropdownItem">
            <a href="#" class="news">Actualitat</a>
            <div class="subMenu">
              <div class="subMenu__content">
                <ul class="subMenu__content-list">
                  <li>
                    <a href="#">Llistat De Comunicats</a>
                  </li>
                  <li>
                    <a href="#">Noticies Del Sector</a>
                  </li>
                  <li>
                    <a href="#">Dossier De Premsa</a>
                  </li>
                  <li>
                    <a href="#">Calendari D'Esdeveniments</a>
                  </li>
                </ul>
              </div>               
            </div>
          </li>
          <li class="dropdownItem">
            <a href="#" class="documentation">Documentació</a>
            <div class="subMenu">
              <div class="subMenu__content">
                <ul class="subMenu__content-list">
                  <li>
                    <a href="#">Llistat De Documents</a>
                  </li>
                  <li>
                    <a href="#">Wiki</a>
                  </li>
                </ul>
              </div>               
            </div>                    
          </li>
          <li>
            <a href="#" class="serviceCatalog">Catàleg de serveis</a>
          </li>
          <li class="dropdownItem">
            <a href="#" class="projects">Projectes</a>
            <div class="subMenu">
              <div class="subMenu__content">
                  <ul class="subMenu__content-list">
                    <li>
                      <a href="#">Llistat De Comunicats</a>
                    </li>
                  </ul>
              </div>               
            </div>                    
          </li>
          <li class="dropdownItem">
            <a href="#" class="privateSpace">El meu espai</a>
            <div class="subMenu">
              <div class="subMenu__content">
                <ul class="subMenu__content-list">
                  <li>
                    <a href="#">Les Meves Dades</a>
                  </li>
                  <li>
                    <a href="#">Els Meus Espais De Col·laboració</a>
                  </li>
                  <li>
                    <a href="#">Les Meves Incidències</a>
                  </li>
                  <li>
                    <a href="#">Calendari D'Esdeveniments</a>
                  </li>
                  <li>
                    <a href="#">Enllaços a RRHH</a>
                  </li>
                </ul>
              </div>               
            </div>                    
          </li>
        </ul>  
        <ul class="navSecondary">
            <li><a href="#">Peticions i incidències</a></li>
            <li><a href="#">Preguntes freqüents</a></li>
            <li><a href="#">Espais de col·laboració</a></li>
            <li><a href="#">Tens un suggeriment?</a></li>
            <li><a href="#">Mapa web</a></li>
        </ul>
      </div>  
    </nav>
  </aside>

Вот мой SCSS (в основном только часть, которая будет отображать и скрывать подменю в зависимости от того, есть ли «текущий» класс или нет в родительском теге «LI»:

li {    
&.dropdownItem {
      &.current {
        background: url("../images/icon-close-submenu.png") 92% 25px no-repeat;
        padding-bottom: 0;
        .subMenu {
          height: 100%;
          &__content {
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
        }
      }
    }
}

А вот JS, который будет переключать ток класса для отображения подменю:

$(".navPrimary .dropdownItem").click(function(e) {
  $(".navPrimary .dropdownItem")
    .not($(this))
    .removeClass("current");
  $(this).toggleClass("current");
  return false;
});

Answer 1

Хитрость заключалась в том, чтобы использовать $ (e.target), чтобы проверить, был ли нажат родительский «LI»:

$(".navPrimary .dropdownItem").click(function(e) {
  var target = $(e.target);
  if (target.is(".dropdownItem") || target.is(".dropdownItem > a")) {
    $(".navPrimary .dropdownItem")
      .not($(this))
      .removeClass("current");
    $(this).toggleClass("current");
    return false;
  }
});