如何讓工作過渡，我刪除了一堂課？

Question

我的CSS3，HTML5，jQuery菜單有問題。 這是一個簡單的菜單，它具有transformX（-100％）和transformX（0％），具體取決於添加的活動類。要添加一個類，一切都會順利進行，但是當我刪除該類時，它只會消失，不會在那裏轉換。如何在課程被刪除時進行轉換？ 這裏是我的代碼，其簡單的（至少我希望如此:)

HTML

<nav class="menu" role="navigation"> 
     <ul class="menu-items-list"> 
      <li><a href="#">Link1</a></li> 
      <li><a href="#">Link2</a></li> 
     </ul> 
    </nav> 

CSS

.menu { 
      position: absolute; 
      display: block; 

      overflow: hidden; 
      transform: translateY(-100%); 
      transition: all 1s cubic-bezier(.92,.7,.64,1); 
     } 
     .menu-active { 
      min-height: 200px; 
      min-width: 200px; 
      max-height: 500px; 
      max-width: 500px; 
      z-index: 6; 
      transform: translateY(0%); 
      transition: all 1s cubic-bezier(.92,.7,.64,1); 
     } 

jQuery的

function meni(selektor, arclass) { 
    selektor.toggleClass(arclass); 
    return false; 
} 
var menu = $('#menu-icon'), 
    mmenu = $('.menu'), 
    menuactive = 'menu-active'; 

menu.on('click', function(){ 
    meni(mmenu, menuactive); 
}); 

Answer 1

由於上述不會按原樣工作，我將目標元素更改爲ul

我也將menu.on('click', function()更改爲mmenu.on('click', function()，其中一個m在單詞menu中缺失，這就是爲了使其工作。

我做了我答案，這似乎是一個錯字維基，並正在考慮投票關閉它是這樣

function meni(selektor, arclass) { 
 
    selektor.toggleClass(arclass); 
 
    return false; 
 
} 
 
var menu = $('#menu-icon'), 
 
    mmenu = $('.menu'), 
 
    menuactive = 'menu-active'; 
 

 
mmenu.on('click', function() { 
 
    meni(mmenu, menuactive); 
 
});

.menu ul { 
 
    position: absolute; 
 
    display: block; 
 
    overflow: hidden; 
 
    transform: translateY(-250%); 
 
    transition: transform 1s cubic-bezier(.92, .7, .64, 1); 
 
} 
 

 
.menu-active ul { 
 
    /*min-height: 200px; 
 
    min-width: 200px;*/ 
 
    max-height: 500px; 
 
    max-width: 500px; 
 
    z-index: 6; 
 
    transform: translateY(0%); 
 
    transition: transform 1s cubic-bezier(.92, .7, .64, 1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="menu" role="navigation"> 
 
    Click here 
 
    <ul class="menu-items-list"> 
 
    <li><a href="#">Link1</a></li> 
 
    <li><a href="#">Link2</a></li> 
 
    </ul> 
 
</nav>