Question

我有一个简单的CSS创建设计。点击一个看起来像箭头的CSS div后，我在Microsoft XML, v6.0的框架中有另一个设计幻灯片。我似乎无法弄清楚如何使这个div容易受到多次点击。

这就是我的意思：想象一下，设计看起来像left: -9999px。点击div后，X从右侧滑入。 Y。当用户再次单击该按钮时，我希望XY滑出，并继续向左移动相同的路径。我有以下JS：

由于我正在学习JS，我正在寻找一个没有任何框架/库的vanilla JS解决方案。谢谢大家

Answer 1

topleft.addEventListener('click', function(){
    if (addLeft.classList[1] == 'out'){
        addLeft.classList.replace('out', 'slideLeft')
        addRight.classList.replace('out', 'slideLeft')  
    } else if (addLeft.classList[1] == 'slideLeft') {
        addLeft.classList.replace('slideLeft', 'slideOut')
        addRight.classList.replace('slideLeft', 'slideOut')
        setTimeout(function(){
            addLeft.classList.replace('slideOut', 'out'),
            addRight.classList.replace('slideOut', 'out')
        }, 300)
    }
})

CSS＆amp; JS div滑块 - 重复点击

1 个答案: