Question

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

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

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

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

Here's a simplified pen如果您想查看实际操作的基础知识。我在Google上搜索或找到的所有内容都指向toggleClass，但在这种情况下似乎不起作用。

Here is another pen我正在努力实现完整的动画效果。当您单击图标时，您可以看到导航元素从右向左逐个淡出淡出 - 我希望它们在您再次单击时从左向右淡入，这是我通过应用封闭类来实现的。如果我从get-go中将该类应用于该属性，则当页面加载时，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属性上使用初始search-closed *类，以便类切换到每个状态。

你可以用

完成

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

Updated Pen

第二次单击

2 个答案: