javascript - 单击展开，单击外部折叠

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 点击事件。单击事件默认执行此操作。要停止此事件传播，您要使用 http://api.jquery.com/event.stoppropagation/在您的 expand 函数中:

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 的解决方案更适合您的需求。它更可靠且更简洁，因为您不必将内容绑定(bind)到 document，如果您习惯性地使用该策略，它很容易变得难以跟踪并导致与其他代码发生冲突。