Question

我有一天我无法直接思考。

基本上有一个div off屏幕，点击左边的幻灯片（工作正常），我需要它再次点击时滑出。

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，但只有在切换显示块/显示无效时才成功。

Answer 1

您应该将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);
})

Answer 2

尝试检查要尝试滑动的元素的左侧，并使用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);
   }
 })

jQuery无法切换工作

2 个答案: