Question

我使用的是：http://www.useful-dates.com/search/

如何编写脚本来说， 1.当用户单击输入时，将显示滚动的div。 2.当用户在滚动的div外部单击时，滚动的div隐藏。

像这样，但我没有运气重写剧本：http://rob-bell.net/static/ddlist.html

我在网上搜索并尝试了各种各样的东西，没有运气，请帮忙吗？

Answer 1

最简单的方法是在触发脚本显示列表（滚动div）时，它会为文档本身的click事件创建触发器。像这样：

$("selector to your div").click(function() {
    var scrolledDiv = $("selector to your scrolled div");
    scrolledDiv.show();
    $(document).one(function() {
        scrolledDiv.hide();
    });
});

使用one()代码隐藏滚动列表只会执行一次，因此每次用户单击文档时都不会运行。但请记住，如果您不希望停止点击事件的传播，它也会触发滚动div内的点击：

$("selector to your scrolled div").click(function(e) {
    e.stopPropagation();
});

Answer 2

如果你查看你的例子的源代码;

            $(document).click(function(){

                $('.ddcontainer > div > ol').hide();

            });

当点击文档时，这会隐藏div。

给你一个像这样的ID：

<div id="searchResults" style="height:95px;width:290px;overflow:scroll;overflow-x:hidden;margin: 2px 0 0 0;">

然后：

$(document).click(function(){

    $('#searchResults').hide();

});

或者，也许更好的解决方案是使用focus和blur：

$("#kwd_search").focus(function(){
    $('#searchResults').show();
}).blur(function(){
    $('#searchResults').hide();
});

这将显示焦点放在输入上的结果，并在您“保留”输入时将其删除。

<强>更新

使用自动完成插件，您可以在选择项目后执行任务，如下所示：

$( "#tags" ).autocomplete({
    source: availableTags
}).bind( "autocompleteselect", function(event, ui) {
    location.href = ui.item.value; // If the value of the item is a url, this will forward you to it
});

Jquery - 点击外面并隐藏Div

2 个答案: