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;
  }
});

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

1 个答案: