的 Updated PEN

Question

我正在构建一个带有菜单和子菜单的经典响应式菜单，我对Jquery很陌生，所以当我需要显示另一个子菜单时，我很难弄清楚如何隐藏以前的子菜单

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

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

Answer 2

这很简单，只需先从所有菜单项中删除“当前”类，然后进行切换。

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

以下是一个工作示例：http://codepen.io/anon/pen/NRPLRN

Answer 3

在.current li之前，只需从toggling移除class课程。

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

<强>

的 Updated PEN

Answer 4

为了隐藏以前打开的子菜单，您需要删除它们的“当前”类。

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

  $(this).toggleClass('current');
});

Jquery：单击显示子菜单并隐藏任何其他打开的子菜单

4 个答案:

的 Updated PEN