jjzjj

jquery - 单击其他地方时显示菜单并隐藏它？

coder 2023-08-12 原文

我有这样的场景，我有 body 标签，它没有在视觉上包装所有内容

我有 3 个 TR，其中包含 2 个 TD - 一个用于信息词，一个用于黄色 div。

点击每个 Info TD - 打开一个 div(它自己的 - 绝对位置)。

  • 当我单击 Info 时，黄色窗口会切换。

我遇到的问题:关闭黄色 div。

我希望它仅在我点击相关的 Info TD 或黄色 div 之外时关闭

如您所见，点击 Info TD 已经关闭了 div。

但我对黄色 div 的外部区域有疑问。

这就是我所做的:

$("body").on('click', ".tdInfo", function (e) //when clicking on tdInfo
{
    var $cached = $(this).closest('tr').find('.myDiv'); //cache the suppose to be open div
    var wasOpen = $cached.is(":visible");
    $(".myDiv:visible").hide(); //hide all previous visible
    if (wasOpen) $cached.slideUp();
    else
   $cached.slideDown(function ()  //when the yellow div open - register once to close only when :not(.myDiv) are clicked
    {
        $("body").one('click', ':not(.myDiv)', function (e2)
        {
            e2.stopImmediatePropagation(); // Parent - ignore me.
            $cached.slideUp();
            return false;
        });
    });
});

问题

上面的代码没有按预期工作。当我点击黄色的 div - 它关闭。我不希望它被关闭。

黄色 div 应该关闭的唯一情况是:单击黄色 div 外部的 TD Info 或。

Full working Jsbin

nb 请不要尝试更改高度或插入其他元素。这是我当前页面的精确简化。另外 - 我可以找到一个包含更多 JQ 的解决方案，但我认为它应该更简单。

最佳答案

我会这样做

$(document).on('click', function(e) {
    if ( $(e.target).closest('.td').length > 0 ) return;

    var $cached = $(e.target).closest('tr').find('.myDiv');
    var wasOpen = $cached.is(":visible");

    $(".myDiv:visible").hide();

    if ($cached.length && (!wasOpen)) {
        $cached.slideDown();
    }
});

body 元素是具有给定高度和宽度的元素，如 OP 的示例所示，并且在黄色元素之外单击时和 在 body 之外你没有点击任何东西，但是所有点击都会传播到 document 级别所以你必须在 document 上收听，不是 body。

FIDDLE

关于jquery - 单击其他地方时显示菜单并隐藏它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24351177/

jquery单击codecachedsectionhtml

有关jquery - 单击其他地方时显示菜单并隐藏它？的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  6. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

  7. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  10. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

随机推荐