Jquery 切换单击最多4次可以正常工作，但之后从第6次单击不能正常工作

首先单击链接1，它向右移动100px，箭头显示。
第二次点击链接2，它向右移动100px，链接1向后移动，直到箭头可见。
第三次点击链接3，它向右移动100px，链接2向后移动，直到箭头可见。
第四次点击链接4，它向右移动100px，链接3向后移动，直到箭头可见。
然后第五次点击链接4，它向后移动，箭头消失

它很好，但当我单击下一次时，它不工作，当单击下一次第7次时，它工作，下一次不工作，依此类推

我期望当链接移向右箭头时显示，当链接移回箭头时隐藏

$（'.nav ul li'）。单击（函数（）{
var clicks=$（this.data（'clicks'）；
如果（单击）{
$（this.animate（{right:0}）；
$（'.arrow'）.css（{'opacity'：'0'}）；
}否则{
$（this.css（{'position'：'relative'}）.animate（{right:100}，function（））{
$（'.nav ul li'）。不是（这个）。动画（{right:0}）；
});
$（'.arrow'）.css（{'opacity'：'1'}）；
}
$（this）.data（“单击”，！单击）；
});
.nav{宽度：100px；位置：绝对；右侧：40px；}
.nav ul li:hover{color:#fff；}
.阿罗{
位置：绝对位置；
右：150px；
不透明度：0；
过渡：1s；
-webkit动画名称：arrowAnimation；
-webkit动画持续时间：1s；
动画名称：箭头动画；
动画持续时间：1s
}
@-webkit关键帧箭头动画{
从{顶部：10%；不透明度：0}
至{顶部：18%；不透明度：1}
}
@关键帧箭头动画{
从{顶部：10%；不透明度：0}
至{顶部：18%；不透明度：1}
}







如果我没听错你说的话，这一击是有效的

虽然如果我是你，我也会在jQuery中设置箭头的转换速度和动画

$('.nav ul li').click(function() {

  if($(this).css('right') !== '100px') {
    if($('.arrow').css('opacity') == '0') {
      $('.arrow').css({'opacity':'1'});
    }


    $(this).css({'position':'relative'}).animate({right:100},function(){
      $('.nav ul li').not(this).animate({right:0});
    })
  }
  else {
    $(this).animate({right:0})
    $('.arrow').css({'opacity':'0'});
  }

});