Question

我有一个元素，我想在点击时展开，然后在外面点击时折叠，从而得到以下代码。然而，当我运行它时，它将开始扩展然后立即崩溃，因为两个函数都是按顺序调用的。我不明白为什么以及如何解决这个问题。

jQuery(document).ready(function() {

var element         = jQuery("#search-main");
var defaultWidth    = jQuery("#search-main").css('width');
var expandWidth     = "200px";

var fnSearch = {
    expand : function() {

        jQuery(element).animate({
            width : expandWidth
        });

        jQuery(document).bind('click', fnSearch.collapse);
    },

    collapse : function() {

        jQuery(element).animate({
            width : defaultWidth
        });

        event.stopPropagation();

        jQuery(document).unbind("click", fnSearch.collapse);

    }
}

jQuery("#search-main").bind("click", fnSearch.expand);

});

Answer 1

您遇到了问题，因为#search-main点击事件正在传播到文档;即，首先触发#search-main点击事件，然后触发document点击事件。 Click事件默认执行此操作。要停止此事件传播，您需要在expand函数中使用http://api.jquery.com/event.stoppropagation/：

jQuery(document).ready(function() {

var element         = jQuery("#search-main");
var defaultWidth    = jQuery("#search-main").css('width');
var expandWidth     = "200px";

var fnSearch = {
    expand : function(event) { // add event parameter to function
        // add this call:
        event.stopPropagation();

        jQuery(element).animate({
            width : expandWidth
        });

        jQuery(document).bind('click', fnSearch.collapse);
    },

    collapse : function() {

        jQuery(element).animate({
            width : defaultWidth
        });

        jQuery(document).unbind("click", fnSearch.collapse);

    }
}

jQuery("#search-main").bind("click", fnSearch.expand);

});

那就是说，Jason P的解决方案对你想要的更好。它更可靠，更简洁，因为您不必将内容绑定到document，如果您习惯性地使用该策略，这很容易变得难以跟踪并导致与其他代码冲突。

Answer 2

点击后，您可以从#search-main元素取消绑定点击事件，或者停止事件的传播，但我建议绑定到模糊和焦点事件：

http://jsfiddle.net/6Mxt9/

(function ($) {
    $(document).ready(function () {
        var element = jQuery("#search-main");
        var defaultWidth = jQuery("#search-main").css('width');
        var expandWidth = "200px";

        $('#search-main').on('focus', function () {
            $(element).animate({
                width: expandWidth
            });
        }).on('blur', function () {
            $(element).animate({
                width: defaultWidth
            });
        });
    });
})(jQuery);

这样，即使用户选择进入或离开该字段，它也会起作用。

点击展开，外部点击折叠

2 个答案: