2

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

很好，但是当我下次单击时，它不起作用，并且当再次单击第 7 次时，它起作用，下次不起作用，依此类推。

我希望当链接移向右箭头显示和链接移回箭头隐藏时。

$('.nav ul li').click(function() {
  var clicks = $(this).data('clicks');
  
  if (clicks) {
    $(this).animate({right:0});
    $('.arrow').css({'opacity':'0'});
  } else {
    $(this).css({'position':'relative'}).animate({right:100},function(){
      $('.nav ul li').not(this).animate({right:0});
    });
    $('.arrow').css({'opacity':'1'});
  }

  $(this).data("clicks", !clicks);
});
.nav {width:  100px; position: absolute; right: 40px; }
.nav ul li:hover {color: #fff;}
.arrow {
    position: absolute;
    right: 150px;
    opacity: 0;
    transition: 1s;
    -webkit-animation-name: arrowAnimation;
    -webkit-animation-duration: 1s;
    animation-name: arrow-animation;
    animation-duration: 1s
}
@-webkit-keyframes arrowAnimation {
    from { top:10%; opacity:0 }
    to { top:18%; opacity:1 }
}
@keyframes arrowAnimation {
    from { top:10%; opacity:0 }
    to { top:18%; opacity:1 }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
  <span class="arrow"><img src="images/arrow.png" alt="arrow" /></span>
</div>

4

1 回答 1

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

});

https://jsbin.com/guwahizesi/edit?html,css,js,控制台,输出

于 2020-01-25T13:08:24.363 回答