如何在div外部单击鼠标时隐藏div
在div外部单击鼠标时隐藏div，可以通过以下几种方式实现：
- 使用JavaScript事件监听器：在div外部单击鼠标时触发事件，通过修改div的CSS样式来隐藏div。具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
display: block;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
document.addEventListener('click', function(event) {
var myDiv = document.getElementById('myDiv');
if (!myDiv.contains(event.target)) {
myDiv.style.display = 'none';
}
});
</script>
</body>
</html>- 使用jQuery库：jQuery提供了方便的事件处理方法，可以简化代码实现。具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
display: block;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
$(document).click(function(event) {
var myDiv = $('#myDiv');
if (!myDiv.is(event.target) && myDiv.has(event.target).length === 0) {
myDiv.hide();
}
});
</script>
</body>
</html>以上两种方式都是通过判断点击事件的目标元素是否在div内部来决定是否隐藏div。
相关·内容
3回答
操作样式显示属性
javascript
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
height: 500px;
background-color: lightblue;
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the
浏览 3提问于2015-06-11得票数 0
回答已采纳
6回答
带有布尔值的Javascript if语句
javascript、html、if-statement、boolean
我正在尝试创建一个按钮，使我的div元素显示或隐藏，以便使用相同的按钮打开和关闭它。我不明白为什么它不工作，当我点击按钮没有任何反应，有人能帮助我吗？
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
height: 500px;
background-color: lightblue;
display: none;
}
</style>
</head>
<body>
<p>Click t
浏览 0提问于2018-02-05得票数 0
2回答
如何在默认情况下隐藏和显示单击多个内容项？
javascript、html
我有以下代码。默认情况下它会显示，但我想在默认情况下将其隐藏。 此外，我无法控制这两个div，只有一个显示/隐藏切换工作，我希望他们(但一直没有成功)都工作。 如何在默认情况下隐藏并在单击时展开？ <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
te
浏览 22提问于2020-08-07得票数 0
4回答
带按钮的水平滚动DIV
javascript、html
不知道我做错了什么，当我按下按钮时，我想要的是这个DIV卷轴的内容。从这里得到了很多代码，但现在我被卡住了……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Cont
浏览 1提问于2014-06-12得票数 0
2回答
如何显示和隐藏？
javascript、html、show-hide
我在找到了一个例子
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
&l
浏览 5提问于2021-05-27得票数 0
3回答
Jquery元素类不存在，但事件仍然会触发
javascript、jquery、event-handling、onclicklistener、jquery-events
我有这段代码。
单击按钮时，必须按顺序显示红色、绿色和蓝色，但单击事件直接传播到没有绿色的蓝色。当我使用e.stopproagation时，jQuery事件侦听器仍然附加到不存在的元素类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basket | Placelyrics</title>
<link rel="stylesheet" href=
浏览 2提问于2014-11-11得票数 0
回答已采纳
2回答
javascript中的mouseover和mouseout事件没有正常工作
javascript、jquery、css
我正在尝试做一个div，它在鼠标上方弹出，在它的母div上消失。但是当我进入那个div区域时，它的高度并没有明显的增加，而是在鼠标在这个区域内轻微的移动时，它的高度持续地上下闪烁(即鼠标在滑动时没有从区域中移出)。
参见工作代码：
首先，我想知道鼠标移动和鼠标退出事件是如何工作的(它们的真正含义)；第二，有什么补救措施？我基本上是在纯javascript中找到解决方案，但是jQuery代码也是值得注意的。请参阅下面的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>js height check</tit
浏览 0提问于2014-01-14得票数 0
回答已采纳
4回答
在HTML中隐藏并显示Div标记
javascript、html、css
在这里，我试图隐藏块，但第一次，我需要双击按钮，每次页面刷新。我已附上我的代码，以供参考。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
backgroun
浏览 10提问于2022-01-03得票数 6
4回答
html显示隐藏div元素
javascript、html、css、laravel
我试图在html中使用show/hide div，现在我正在使用w3schools Toggle隐藏和显示。它运行良好，但在默认情况下它显示条件i，默认情况下，如果我按下“显示”按钮，它应该显示什么。帮帮我。
码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px
浏览 6提问于2022-03-10得票数 0
4回答
快速/基本问题-隐藏/显示按钮(Java脚本)
javascript、html、hide
我有一个基本的问题，我认为某人可能很容易回答。我有很少的编码经验，但只是需要一个简单的改变来完成我正在做的网站，。
我有一个与我所用的例子类似的简单切换。：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
浏览 2提问于2020-12-17得票数 1
2回答
如何将事件侦听器分配给允许div的宽度和高度在单击时增长20%的div。
javascript、events、onclick、dom-events、event-listener
我已经开始把它写出来，我使用的大小(100 in乘100 in)与我在上一个问题中使用的相同。我现在只想使用Javascript，尽管我计划在将来的某个时候使用jQuery。我现在看到的主要问题是，行(this.style.width) ' this‘还没有定义，所以代码不知道'this’指的是div，我不知道如何使用事件侦听器而不是childNodes (我知道该如何做)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"
浏览 2提问于2015-04-08得票数 0
回答已采纳
5回答
以平滑的方式显示div
javascript、html、css
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<style >
body{
background: black;
}
div{
background : red;
height: 200px;
浏览 1提问于2021-03-12得票数 0
3回答
请更正我的jquery切换
jquery、toggle
晚上好:我想把鼠标放在.slide上显示#panel，然后点击.close显示#panel，谁能纠正我的代码？谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="C
浏览 0提问于2011-01-13得票数 0
回答已采纳
1回答
使用display属性操作元素
javascript、jquery、html、css
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
height: 500px;
background-color: lightblue;
display: none;
}
#second {
width: 500px;
height: 500px;
b
浏览 1提问于2015-06-11得票数 0
回答已采纳
4回答
首次启动时需要双击故障排除按钮才能工作
javascript、jquery、html、css
我写了这段代码，当你点击一个按钮时，它会隐藏或显示部分文本。但是，当您第一次打开页面时，您需要单击该按钮两次才能正常工作。这只在你第一次尝试启动页面时才会发生，因为一旦你点击了两次，你就只需要像往常一样每次点击一次。有人知道为什么会这样吗？ 下面是我的代码： #myDIV {
width: 200px;
background-color:#333;
color:#fff;
display:none;
padding:0;
margin:0;
}
#myDIV2 {
width: 200px;
background-color:#333;
col
浏览 26提问于2017-11-30得票数 1
回答已采纳
1回答
在动画元素时捕获鼠标单击
javascript、jquery、html、animation
我试图动画一个div，并改变它的背景颜色，当用户点击它。
这是一个示例代码：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#one").hover(function()
浏览 0提问于2013-12-31得票数 0
回答已采纳
1回答
函数执行后CSS转换不能正常工作
javascript、html、css
因此，我有一个转换，当我将鼠标悬停在div上时，可以修改div的背景色，如果我按下执行myFunction2的按钮，该按钮也会在div上悬停之前更改div的背景色，则转换将不再修改背景颜色。
function myFunction2() {
document.getElementById("myDIV").style.backgroundColor = "yellow";
}
function myFunction() { document.getElementById("myDIV").style.WebkitTransition
浏览 0提问于2020-01-13得票数 0
回答已采纳
8回答
jQuery移动点击事件触发两次
jquery、jquery-mobile
我用jquery 'tap‘事件进行了测试，发现它每次触发都会触发两次。html页面的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googlea
浏览 4提问于2012-05-29得票数 12
1回答
在文档模式的ie 8中，为什么元素可以跳转到行尾？
html、internet-explorer
测试代码(test.html)？
<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0px;margin:0px;}
</style>
</head>
<body style="background-color:orange;">
<b onmousemove="tip(this);">A</b> <b>B</b> <b>C</b><!--tip:when
浏览 1提问于2012-01-27得票数 0
回答已采纳
1回答
Jquery复选框控件
jquery、html、checkbox
我有两个div和两个复选框。İ如果我单击第一个复选框，将出现第一个div。稍后，如果我单击第二个复选框，第二个div将出现在第一个div下。一开始我给两个div赋予了一些风格。当第一个复选框未被选中时，如果我单击第二个复选框，它应该是第一个div的位置。稍后，当我单击第二个div时，它应该在第一个div下。我希望你明白我的意思。我写了一些代码，但这是不够的。稍后，我将使用多个复选框。我必须控制所有的复选框作为这个小应用程序。我需要一种合乎逻辑的方式，并且我想写更少的代码。这是一开始的风格。
<!DOCTYPE html>
<html>
<head>
<
浏览 0提问于2016-05-10得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
