如何通过单击链接在屏幕上打开一个框，并在JS中的外部单击时将其隐藏
通过单击链接在屏幕上打开一个框，并在JS中的外部单击时将其隐藏的解决方案如下：
- HTML部分：
使用HTML的
<a>标签创建一个链接，同时给它一个唯一的id属性，如下所示：
<a href="#" id="myLink">点击打开框</a>接下来，在HTML的任意位置添加一个<div>元素，作为要显示的框，给它一个唯一的id属性，并设置初始状态为隐藏，如下所示：
<div id="myBox" style="display:none;">这是一个框</div>- JavaScript部分：
使用JavaScript来实现单击链接打开框和外部单击隐藏框的功能。首先，通过
getElementById()方法获取链接和框的引用，如下所示：
var link = document.getElementById("myLink");
var box = document.getElementById("myBox");然后，添加单击链接显示框的事件处理程序，当链接被点击时，将框的显示状态设置为可见，如下所示：
link.onclick = function() {
box.style.display = "block";
}最后，添加外部单击隐藏框的事件处理程序，当用户在页面的其他地方点击时，将框的显示状态设置为隐藏，如下所示：
document.onclick = function(event) {
if (event.target != box && event.target != link) {
box.style.display = "none";
}
}以上代码中的event.target表示触发事件的元素，通过判断event.target是否等于框或链接，来确定是否要隐藏框。
完整代码示例：
<!DOCTYPE html>
<html>
<head>
<title>打开和隐藏框</title>
</head>
<body>
<a href="#" id="myLink">点击打开框</a>
<div id="myBox" style="display:none;">这是一个框</div>
<script>
var link = document.getElementById("myLink");
var box = document.getElementById("myBox");
link.onclick = function() {
box.style.display = "block";
}
document.onclick = function(event) {
if (event.target != box && event.target != link) {
box.style.display = "none";
}
}
</script>
</body>
</html>这个解决方案可以在点击链接时显示框，并在点击框外的区域时隐藏框。您可以根据自己的需求自定义链接文本、框内容和样式。
相关·内容
我的目标是在单击#box1时显示#box2，但当您单击#box2以外的其他内容时，它将显示none，并且只显示#box1。这是我的两个盒子，它们只是两个风格的div： var condition;
}); <script src="htt
浏览 20提问于2016-07-29得票数 2
回答已采纳
我在两个屏幕上创建了一个标准面板，并将外部监视器设置为我的主屏幕。当按下super键时，应用程序菜单将在外部监视器上打开。搜索框不会自动聚焦，因此单击搜索框并在搜索框中键入任何内容都不会显示任何结果。当现在单击笔记本屏幕上的应用程序菜单按钮并在
浏览 0提问于2021-11-02得票数 0
7回答
我正在创建一个自定义的下拉框，当鼠标在下拉框之外被单击时，我想要注册，以便隐藏它。是否可以检测到控件外部的单击？或者我是否应该在包含窗体上创建一些机制，并在任何下拉框打开时检查鼠标点击？
浏览 2提问于2011-04-18得票数 18
回答已采纳
在查看一个jquery项目时，我发现了这一行： $("html:first").removeClass("no-js");想要理解这句话，他的目的是什么？
浏览 2提问于2011-09-10得票数 4
Netbean 8:变量窗口，监视窗口，断点窗口，调用堆栈窗口，输出窗口调试后不自动隐藏。我怎么能解决这个问题。谢谢。
浏览 3提问于2014-09-10得票数 1
回答已采纳
2回答
IE8 /9超辉光问题
、、、
我在IE8/9中遇到了一个涉及外部发光的奇怪问题。我有一个模式框(由jQuery UI创建)，应用了外部发光。框的高度根据您在框中选择的选项而增加或减小(简单地显示隐藏JS)问题是，当框的高度减小时，它会留下水平发光的标记/痕迹，当您在屏幕上的</
浏览 0提问于2012-10-30得票数 0
我的IntelliJ项目有问题。将VCS添加到我的项目后，" project“选项卡中的项目结构将不再可见。
其他项目运作良好，一切都是可见的。"
浏览 4提问于2017-08-10得票数 1
回答已采纳
我发现了一个奇怪的异常GTM事件触发器。
我捕获事件点击PDF文档在我的网页和触发事件记录到我的谷歌分析。触发器显示在附加屏幕截图中。(1)当您单击网页上的PDF文档(链接在html标记中不包含target="_blank“属性)时，PDF将在当前选项卡中打开，并记录GA事件--”成功“。(2)右键单击网页上的
浏览 4提问于2016-09-28得票数 1
回答已采纳
1回答
所以我想要的是检查FireFox是否允许弹出窗口。有两种可能性：
应该这样做，如果不允许，则显示适当的消息并等待(setTimeout?)直到授予访问权限(并打开弹出afterwards).Before执行此window.open操作)，检查FireFox是否允许弹出窗口。如果没有，则显示适当的消息(并且不允许用户在没有授予访问权限的情况下深入应用程序)，但如果允许，则不允许打开弹出窗口(用户不需要看到他可以打开弹出窗口)。所有这些都可以在用户登录时完
浏览 3提问于2012-03-20得票数 0
回答已采纳
4回答
我使用PostBackUrl属性导航到另一个页面，但是我希望在OnClick事件中设置这个属性，这样我就可以根据他们在对话框中上传的文件的名称添加一个查询字符串变量。单击按钮后可以很好地回发，我可以在asp标记中设置PostBackUrl属性，或者在后面代码的Page_Load()中设置。pic=" + fileName; }
编辑:好的，下面是
浏览 21提问于2013-05-08得票数 0
回答已采纳
3回答
我正在显示一个包含消息的列表，并且每条消息的行都有一个注释。单击注释按钮打开一个包含编辑文本的评论框，并在屏幕上显示用于提交comment.When注释的按钮。屏幕上还会出现用于输入text.If的键盘。在输入文本之前，我按下了主页按钮，然后应用程序进入后台，但键盘仍然保留在screen.This上</
浏览 10提问于2014-07-09得票数 3
我已经用MVC和Angular.js创建了一个项目，我的应用程序在visual studio中运行得很好。但是当我在IIS中发布它时，我在控制台中收到错误消息，说angular.min.js文件中有一些问题。我尝试在调试和发布模式下发布代码。它在visual studio中运行得很好。
浏览 0提问于2020-06-26得票数 1
我试图在一个按钮中创建一个下拉列表--当单击该按钮时，下拉列表应该打开。我正试图通过点击外边把列表隐藏起来。当单击外部时，下拉列表实际上是关闭的，但在单击列表时也关闭了--这不是预期的。当单击列表内时，如何保持列表打开？stopPropag
浏览 1提问于2018-12-17得票数 1
回答已采纳
1回答
在本文中，我使用各种图表显示数据(数据来自外部源)。我是这门语言的新手，所以我使用了来自互联网不同部分的代码，很多工作都来自于编辑这些代码，以使它们彼此兼容。我成功地部署了图表(对于我来说，这是一个很大的成就，因为我在一周前刚开始使用javascript和HTML )。现在我想在点击图表的条形图或者至少在标签上打开一个模态，但是我遇到了一些麻烦。图表上的条形图是这样定义的：
var vakken
浏览 2提问于2017-05-07得票数 0
回答已采纳
我在Jquery 1.4.2中使用jQuery UI Autocomplete 1.8.1，我遇到了这个问题。当用户使用鼠标select一个选择时，我不会做类似的事情。使用键盘时，一切正常，在输入文本框中选择后，值会出现，但使用鼠标时，它会坚持使用旧的(键入的)值，而不是选定的值。如何控制
浏览 2提问于2010-06-17得票数 5
回答已采纳
2回答
需要一些想法，BrowseEmployee当我单击任何行时，它将导致另一个屏幕(而不是同一个实体视图屏幕)。在另一个屏幕上，我将展示很多细节，
在这个屏幕中，我将从SQL视图实体中提取ID字段，该字段与上一个屏幕(BrowseEmploy
浏览 5提问于2015-03-19得票数 0
回答已采纳
2回答
我使用jquery创建了一个模式对话框，并在加载对话框时对其进行了一些调整。我删除了overflow hidden属性，该属性禁用页面滚动，以便可以滚动页面。我还删除了一个带有"ui-widget-overlay“类的div，它创建了透明的灰色behide对话框，并覆盖在页面上。现在我可以选择div之外的文本。右键单击链接并在新选项卡中打开</e
浏览 0提问于2011-12-15得票数 0
回答已采纳
我有一个带有触摸屏设备的PyQt5应用程序在Windows 10上运行，我需要在全屏上运行它(任务栏也必须隐藏在tablet模式中)。
当我启动主窗口时，它有时会启动，但开始屏幕显示在前台:我需要手动查找运行应用程序，然后单击我的应用程序，以便在屏幕上看到它。在使用我的应用程序时，我可以单击</e
浏览 0提问于2018-06-11得票数 0
我已经在单击链接时动态设置了隐藏输入元素的值。在lightbox中，我的一个div中，#section1是隐藏的。最初，当我打开lightbox时(通过单击另一个链接)，这个div是隐藏的。第二次，当我单击第二个链接时，即changed_link，我希望显示
浏览 1提问于2011-04-25得票数 1
回答已采纳
2回答
Z-索引不适用于右击。
、、、
我希望这个内容菜单在
用户右击屏幕上的任何位置，但其他div.contextfFolder除外。如果在打开contextmenu并在其他div.contextFolder上发生右键单击时，我希望当前的contextmenu消失，并在新的div.contextFolder上<
浏览 2提问于2012-07-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
