单击时避免下拉子菜单元素关闭主下拉菜单

Question

我正在为某些选项制作带有子菜单的常规下拉菜单，一切正常，但唯一的问题是，因为交互是基于包含子菜单的父 LI 元素，每次我在子菜单元素内单击时-down 也会关闭。

这是我的 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;
  }
});