jQuery-用于切换内容的自定义插件

jQuery - Custom plugin for toggling content

本文关键字：自定义 插件 用于 jQuery-      更新时间：2023-09-26

我刚刚做了我的第一个jQuery插件，它隐藏了太长的内容。

你可以在http://jsfiddle.net/denislexic/bT4dH/6/.

当你检查并点击"…"时，你会注意到第一个切换了三次，第二个切换了两次，第三个是正确的（所以只有一次）。

我不知道它为什么这么做。我试过e.preventDefault()、stopPropagation()等。似乎什么都不起作用。

以下是似乎有问题的代码：

 $("." + opts.clickZoneClass).on("click", function (e) {
    _debugger(1);
    var element = $(this).parent('div').children('div.status');
    // I know you can use is(':visible'), but it doesn't work in Internet Explorer 8 somehow...
    if (element.hasClass('open')) {
        _debugger(2);
        element.animate({
            height:element.attr('data-toggle')
        }, 'fast');
        //$(this).html();
        element.removeClass('open');
    } else {
        _debugger(3);
        element.animate({
            height:element.attr('data-height')
        }, 'fast');
        element.addClass('open');
    }
    return false;
});

这是因为您在$.each循环中执行上面的代码。如果你拿出你的绑定代码，只运行一次你的插件就可以了。

我只是把它拔出来，移到文档就绪功能中，以说明。。。

http://jsfiddle.net/bT4dH/10/

我猜在迭代元素时，click事件绑定了不止一次。为了克服这个问题，只需在点击前添加取消绑定方法，即

$("." + opts.clickZoneClass).unbind().on("click", function (e) {
    // existing stuff
});

这将解决您的问题。

相关文章：