当前位置：文江博客话题详情

Jquery - 单击外部并隐藏 Div

发布于 2025-01-04 23:22:20 字数 349 浏览 1 评论 0原文

我正在使用这个：http://www.useful-dates.com/search/

如何剧本应该这样写： 1.当用户点击输入时，会显示滚动的div。 2. 当用户点击滚动div之外时，滚动div隐藏。

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

我在网上搜索并尝试了各种方法，但没有成功，请帮忙？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱我好吗 2025-01-11 23:22:20

最简单的方法是当您的脚本被触发显示列表（滚动的 div）时，它也会为文档本身的单击事件创建一个触发器。像这样的事情：

$("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();
});

The easiest way of doing this is when your script is triggered to display the list (the scrolled div) it creates a trigger to the click event on the document itself aswell. Something like this:

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

By using the one() the code to hide the scroll list will only be executed once, so it wont run each time the user is clicking the document. But remember that it will also trigger on clicks inside your scrolling div, if you dont want that stop the propagation of the click event like this:

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

回复收藏 0 原文

A君 2025-01-11 23:22:20

如果您查看示例的源代码；

            $(document).click(function(){

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

            });

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

为您的 div 提供一个 ID，如下所示：

然后：

$(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
});

If you look at the source code of your example ;

            $(document).click(function(){

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

            });

This hides the div when there has been a click on the document.

Give you div an ID like so:

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

and then:

$(document).click(function(){

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

});

Alternatively and maybe a better solution is to use focus and blur:

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

This will show the results when the focus is put onto the input, and removes it when you 'leave' the input.

UPDATE

With the autocomplete plugin, you can perform a task after the item has been selected like this:

$( "#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
});

回复收藏 0 原文

~没有更多了~