2

我正在尝试制作一个带有自动建议面板的搜索框，如果用户在搜索框已经获得焦点后单击它，该面板就会下降。我尝试检查 $("#search_box").is(":focus")，并使用以下代码，两者都有相同的问题：

var fade_in=function() {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function() {
    $("#search_panel").fadeOut(100);

    $("#search_box").focus(function() {
        $(this).on("click", fade_in);
    });

    $("#search_box").blur(function() {
        $(this).off("click", fade_in);

        $("#search_panel").fadeOut(100);
    });
});

似乎事件的顺序使得搜索面板总是在第一次点击时出现 - 顺序是：

  • 用户点击搜索框
  • 它成为焦点
  • 添加了点击处理程序
  • 然后点击事件触发导致面板出现

而我希望它会是：

  • 用户点击搜索框
  • 点击事件被触发
  • 该框成为焦点，因此添加了点击处理程序
  • 什么都没有发生，因为在单击事件发生时没有添加处理程序。

在第二次点击时，面板应该会出现，因为输入框已经有了焦点。

这是当前代码：http: //jsfiddle.net/DtfYq/

4

1 回答 1

2

如果我对您的理解正确，我相信以下代码应该可以满足您的要求：

var toggle=function() {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function() {
    $("#search_panel").fadeOut(100);

    $("#search_box").on("click", function() {
        if ($(this).is(':focus')) {
            $(this).on("click", toggle);
        } else {
            $(this).focus();
        }
    });

    $("#search_box").blur(function() {
        $(this).off("click", toggle);

        $("#search_panel").fadeOut(100);
    });
});

修改后的 JSFiddle：

我已经对其进行了修改，以便在单击搜索框时检查该元素是否具有焦点。如果是，则附加该click事件。否则，它只会专注于它。

于 2013-08-31T17:28:49.963 回答