javascript - Jquery:点击显示子菜单并隐藏任何其他打开的子菜单

Question

我正在构建一个带有菜单和子菜单的经典响应式菜单，我是 Jquery 的新手，所以我无法弄清楚如何在需要显示另一个子菜单时隐藏上一个子菜单。

Here's the Pencode

这是 HTML:

<nav class="products">
    <ul>
        <li class="brown link-menu"><a href="#">wine essentials</a>
            <div class="sub-menu">
                <div class="content-sub-menu">
                    <ul class="sub-menu-list">
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">standard</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">premium</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">super premium</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">ultra premium</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="pink link-menu"><a href="#">wine selective & prestige</a>
            <div class="sub-menu">
                <div class="content-sub-menu">
                    <ul class="sub-menu-list">
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">standard</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">premium</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">super premium</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">ultra premium</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="green link-menu"><a href="#">master distillers</a>
            <div class="sub-menu">
                <div class="content-sub-menu">
                    <ul class="sub-menu-list">
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">standard</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">premium</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">super premium</a></li>
                        <li class="link-subcat"><a href="#" class="menu-subcat-link">ultra premium</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</nav>

这是 SCSS:

nav.products {
  ul {
    li.brown {
      border-left: 10px solid #a09484;
    }
    li.pink {
      border-left: 10px solid #9d7b8c;
    }
    li.green {
      border-left: 10px solid #558d80;
    }
    li {
      border-bottom: none;
      padding: 1em 0;
      margin-bottom: .2em;
      a {} .sub-menu {
        height: 0;
        overflow: hidden;
        .content-sub-menu {
          -moz-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
          -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
          -webkit-transition: transform 0.3s ease-in-out;
          -o-transition: transform 0.3s ease-in-out;
          transition: transform 0.3s ease-in-out;
          ul.sub-menu-list {
            padding-left: 1em;
            li {
              font-size: 1em;
              margin-bottom: 0;
              a {}
            }
          }
        }
      }
      &.current {
        .content-sub-menu {
          -moz-transform: translateY(0%);
          -ms-transform: translateY(0%);
          -webkit-transform: translateY(0%);
          transform: translateY(0%);
        }
        /*DROPDOWNS*/
        .sub-menu {
          height: 100%;
        }
        /*DROPDOWNS END*/
      }
    }
  }
}
nav.products ul li.current .sub-menu {
  height: 100%;
}

我正在使用这个脚本来显示子菜单:

$('.products ul li').click(function(e) {
    $(this).toggleClass('current');
});

Answer 1

$('.products ul li').click(function(e) {
   $('.current').removeClass('.current');
   $(this).addClass('current');
});

试试上面的方法。这样它将在页面中找到任何当前类。删除它并将该类添加到当前元素。