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。相反，你必须保持每个元素的状态。

页面滚动后jQuery slideUp错误

3 个答案: