Question

可能重复：
How to enable or disable an anchor using jQuery?

我在一个锚点上有一个onclick，导致2个div改变它们的宽度（边栏切换的典型概念，同时放大内容）。但是，如果我单击此锚点并在动画仍在播放时再次单击它，它将从当前div的位置开始动画（例如sideDiv通常为200px宽度，内容为1000px宽度，如果我开始动画sideDiv应该为0，内容为1200，但是，如果我再次点击，而side是100，内容是1100，他们将切换回300和900，这不是我想要的。）

所以，从逻辑上讲，我需要在播放动画的时候禁用anchor-onclick并再次启用它，我知道按钮的这个过程，是否有类似的锚点？

这是我的代码：

function toggleSideBar(e) {
        barWidth = $('#resizableBar').width();
        if ($('#content').width() >= "900") {
            $('#content').animate({ width: ($('#content').width() - barWidth) }, 200, function () {
                $('#resizableBar').animate({ width: "show" }, { duration: 200, queue: true});
            });
        }
        else {
            $('#resizableBar').animate({ width: "hide" }, 200, function () {
                $('#content').animate({ width: ($('#content').width() + barWidth) }, { duration: 200, queue: true });
            });

        }
    }

这是锚：

<a id="btnSideDivSlide" onclick="toggleSideBar(this)" href="#">Sideslide</a>

谢谢，

丹尼斯

Answer 1

这样的事可能有用：

   var _isAnimating;

   function toggleSideBar(e) {
    if (_isAnimating) return;

    barWidth = $('#resizableBar').width();
    if ($('#content').width() >= "900") {
        _isAnimating = true;
$('#content').animate({ width: ($('#content').width() - barWidth) }, 200, function () {
            $('#resizableBar').animate({ width: "show" }, { duration: 200, queue: true,    complete: function(){  _isAnimating = false; }});
        });
    }
    else {
 _isAnimating = true;
        $('#resizableBar').animate({ width: "hide" }, 200, function () {
            $('#content').animate({ width: ($('#content').width() + barWidth) }, { duration:   200, queue: true, complete: function(){  _isAnimating = false; } });
        });

    }
}

（不确定我的语法是否完美，但你明白了）

Answer 2

您可以在函数开头检查动画是否正在运行，如果是，则不启动它。全局布尔值可以解决问题。

Answer 3

在jQuery中，以下内容将禁用onclick：

$("#btnSideDivSlide").unbind("click");

然后一旦完成，你可以重新绑定：

$("#btnSideDivSlide").click(function(){
    toggleSideBar(this);
});

如果您在代码中添加以下内容，则可以完全取消HTMl中的onlcick事件属性：

$(document).ready(function(){
    $("#btnSideDivSlide").click(function(){
        toggleSideBar(this);
    });
});

这称为“后期绑定”，可帮助您从HTML中onlick= {{1}}。

Answer 4

试

HTML

<a id="btnSideDivSlide" href="#">Sideslide</a>

的jQuery

$('#btnSideDivSlide').bind ('click' , function () {
  toggleSideBar(this);
})

禁用Anchor onclick

4 个答案:

HTML

的jQuery