第二次单击后，jQuery在两个类之间切换Class

Question

我正试图用jQuery 在两个类之间切换

$('.nav-right').toggleClass('open closed');

同时切换两个类，因为加载页面时，这两个类都没有应用在标记中，而我不希望它们应用。这些类应用了一个我不想在加载页面时显示的动画。

我尝试在元素的第一次单击时应用.open，然后在第二次单击时使用.closed，并在每次单击后在两者之间切换。

如果你想了解一下基本动作，这里有一支简化的钢笔。我在StackOverflow上搜索或找到的所有内容都指向toggleClass，但在这种情况下似乎不起作用。

这是另一支钢笔，里面有我正在努力实现的完整动画。当你点击图标时，你可以看到导航元素是如何从右到左一个接一个地淡出的——我希望它们在你再次点击时从左到右淡出，这是我通过应用封闭类实现的。如果我从一开始就将该类应用于该属性，那么当页面加载时，nav元素会逐渐消失，这不是我真正想要的。

Answer 1

试试这个，

   $('.nav-right').click(
  function(){
 if($(this).hasClass('open'))
 {
    $(this).removeClass('open');
    $(this).addClass('closed');
  }
 else{
    $(this).addClass('open');
    $(this).removeClass('closed');
     }
  });

Answer 2

代码将按原样运行，但您需要在nav right属性上使用初始搜索关闭的*类，以便类切换到每个状态。

你可以用

$('.nav-right').toggleClass('search-closed',true);

更新的笔