Question

我刚刚制作了第一个隐藏内容太长的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;
});

Answer 1

这是因为你在$ .each循环中执行上面的代码。如果您拔出绑定代码并在插件运行良好后运行它。

我把它拉出来并将其移到文档就绪函数中以说明......

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

Answer 2

我猜迭代元素时，click事件会多次绑定。要解决这个问题，只需在点击之前添加unbind方法即可。

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

这将解决您的问题。

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

2 个答案: