0

我有一个我无法思考的日子。

基本上在屏幕外有一个 div，单击从左侧滑入（工作正常），我需要它在再次单击时滑出。

CSS

平板电脑弹出是绝对定位在旋转器内，所以我不能使用 display: none 来隐藏旋转器覆盖并切换。

HTML

<div class="rotator-overlay">
 <div class="tablet-flyout">+</div>
</div>

jQuery

  $('.tablet-flyout').click(function () {
          $('.rotator-overlay').animate({ left: '0' }, 500);
     })

我以前用过slideToggle，但只有在切换显示块/不显示时才成功。

4

2 回答 2

3

您应该将 div 状态保存在一个变量中，然后在 click 函数中检查它。因此，如果 div 不在屏幕上，请将其滑入，如果没有，则将其滑出。

如果您不想为此使用变量，则始终可以$('.rotator-overlay').css('left')根据获得的值检查并执行适当的操作。

像这样的东西（我以-200为例）：

$('.travel-search-tablet-flyout').click(function () {
    if ($('.rotator-overlay').css('left') == 0)
        $('.rotator-overlay').animate({ left: '-200' }, 500);
    else
        $('.rotator-overlay').animate({ left: '0' }, 500);
})
于 2013-10-17T16:51:00.927 回答
0

尝试检查您要滑动的元素的左侧，并使用 if 语句来回切换。

 $('.travel-search-tablet-flyout').click(function () {
   if ($('.rotator-overlay').css('left') == 0) {
     // Slide the other way here, opposite
     // $('.rotator-overlay').animate({ left: '????' }, 500);
   } else {
     // Your original animate
     $('.rotator-overlay').animate({ left: '0' }, 500);
   }
 })
于 2013-10-17T16:52:33.697 回答