5

我有以下功能：

$('.link1').click(function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

它切换一个 div 并向下滚动页面。问题是每次用户切换页面时再次向下滚动......我怎么能只在第一次点击时运行这个动画功能？

4

8 回答 8

12

使用标志或设置数据属性以确保滚动动画仅在第一次单击时出现。

var flag=true;

$('.link1').click(function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    if (flag) {
        $('html, body').animate({scrollTop: '600px'}, 800);
        flag = false;
    }
});

我猜#div2应该仍然切换，但它不应该在每次点击时滚动？

于 2012-07-27T15:37:16.450 回答
3

jQuery .one() http://api.jquery.com/one/

$('.link1').one( 'click', function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});
于 2012-07-27T15:36:57.633 回答
1

使用该.one函数绑定只触发一次的事件。

$('.link1').one('click', function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});
于 2012-07-27T15:36:38.523 回答
0

以下适用于 JQuery。

使用的 CSS：

.cpos {
    position: relative;
    top: -1.65em;
    left: 1.8em;
}

使用的 JQuery：

var p=null; /* Initialize variable p. */
p=$("b").detach(); /* Detach every possible <b>b</b>-tags. */
var p=$("<b>Console loaded!</b>").addClass("cpos"); /* Do anything, like adding class. */
p.appendTo("#container"); /* Append new data to the anchor container. */

也许您可以在制作动画时将其用作参考。;)

于 2013-11-05T03:04:05.220 回答
-1

您可以在处理程序末尾取消绑定该单击处理程序，使其不再触发：

$('.link1').off('click');
于 2012-07-27T15:36:48.650 回答
-1

使用标志

var noRun = 0
$('.link1').click(function(){
    if(noRun==1) {
      return
     }
     noRun = 1  
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});
于 2012-07-27T15:37:10.817 回答
-1

您可以保存一个简单的“令牌”来检查是否是第一次以这种方式触发点击：

$('.link1').click(function(){ 
    if(!$(this).data('isFirstTime')) {
        $("#div2").slideUp(function(){$("#div1").slideToggle();}); 
        $('html, body').animate({scrollTop: '600px'}, 800); 
        $(this).data('isFirstTime', true);
    }
});

这应该可以防止进一步点击

于 2012-07-27T15:37:19.890 回答
-1

这应该这样做

(function(){
    var first=true;
    $('.link1').click(function(){
        if (first){
            first=false;
            $("#div2").slideUp(function(){$("#div1").slideToggle();});
            $('html, body').animate({scrollTop: '600px'}, 800);
        }
    });
})();
于 2012-07-27T15:38:35.980 回答