javascript - 滚动页面后的jQuery slideUp错误

Question

我在使用 jQuery 的 slideUp 和 slideDown 函数时遇到了一些问题。如果你去这个网站

www.confide.re/confide

并单击其中一个框，它通常可以正常工作，但是在您滚动页面并加载更多框后，如果您明白我的意思，则滑动功能会出现错误并无缘无故地执行两次。

这是我在某处做错了什么还是这是一个已知的错误？

谢谢

这是代码：

var state = 'down';

$('.overlay').click(function() {

     if(state == 'down') {
         $(this).next().slideDown(155);
         state = 'up';
     } else {
         $(this).next().slideUp(150);
         state = 'down';
}

.overlay 是每个盒子顶部的透明 div。

Answer 1

像这样在 ajax 成功回调之外定义您的click事件（使用更好的选择器body，它仅用于示例）

$("body").on("click", ".overlay", function(e){
    $(this).next().slideToggle(150);
    $(this).css('background-color', 'rgba(0,0,0,0)');
});

Answer 2

你应该这样做：http: //jsfiddle.net/chanckjh/Jak6Q/

html:

<div class="something">
    <div class="bar">

    </div>
</div>​

jQuery：

$(function() {
    $('.something').click(function() {
        $('.bar').slideToggle();
    });
});​

CSS：

.something{
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
.bar{
    display: none;
    width: 500px;
    height: 50px;
    background: blue;
}​

或者像这样给孩子：http: //jsfiddle.net/chanckjh/Jak6Q/1/

$(function() {
    $('.something').click(function() {
        $(this).find('.bar').slideToggle();
    });
});​

Answer 3

您不能state在需要记录其特定状态的许多元素之间共享单个变量。相反，您必须保持每个元素的状态。