似乎无法让 addEventListener 工作

DrDoom 发表于 Dev

毁灭博士

我目前卡住了，因为我似乎无法让 addEventListener 工作。

我试过开发。在 addEventListener 上有断点的工具，但它们不会停止脚本，所以我猜代码检测click和mouseleave和mouseenter

function hide() {
  document.getElementById("links").style.display = "none";
};

function show() {
  document.getElementById("links").style.display = "flex";
};

var menu = document.getElementById("menu");

menu.addEventListener("mouseenter", show);
menu.addEventListener("mouseleave", hide);

menu.addEventListener("click", show);
document.addEventListener("click", function() {
  if (this != menu) {
    document.getElementById("links").style.display = "none";
  }
});

#menu {
  height: 10vh;
  background-color: red;
  text-align: center;
  transition: all 1s ease-out;
  padding-top: 5vh;
}

#menu:hover {
  color: red;
}

#envelope {
  height: 0;
  display: block;
  background-color: blue;
  min-width: 100%;
  z-index: 1;
  position: absolute;
  left: 0;
  content: "";
  opacity: 0;
  transition: all 1.3s ease-out;
}

#links {
  height: 0;
  display: none;
  background-color: pink;
  justify-content: center;
  z-index: 2;
  min-width: 100%;
  opacity: 0;
  transition: all 1s ease-in;
}

#google {
  margin-top: -1vh;
  width: 150px;
}

#mysite {
  padding-left: 5%;
  margin-top: -1vh;
  width: 150px;
}

#menu:hover #links {
  opacity: 1;
  height: 100px;
}

#menu:focus #links {
  opacity: 1;
  height: 100px;
}

#menu:hover #envelope {
  height: 100px;
  opacity: 1;
}

#menu:focus #envelope {
  height: 100px;
  opacity: 1;
}

<div id="menu">Click here to browse the internet.
  <div id="envelope">
    <div id="links">
      <div>
        <a href="https://www.google.com"><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a>
      </div>
      <div style="width: 20%;"></div>
      <div>
        <a href="https://www.mywebsite.com/si/"><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png" /></a>
      </div>
    </div>
  </div>
</div>

马尼拉吉·穆鲁甘

你快到了，需要做一些修改，

在css 中，您正在制作opacity: 0两个元素#envelope，#links并且您可以将信封更改为opacity: 1自己。

在JS 中，这一行执行成功，

document.getElementById("links").style.display = "flex";

但作为已经在CSS的#links是opacity: 0，它没有显示，所以你需要做opacity: 1以及沿display:flex通过JS ..

所以show()函数内部的代码，应该是，

function show (){
    document.getElementById("links").style.display = "flex";
    document.getElementById("links").style.opacity = "1";
};

片段如下，

function hide (){
	document.getElementById("links").style.display = "none";
};

function show (){
	document.getElementById("links").style.display = "flex";
  document.getElementById("links").style.opacity = "1";
};

var menu = document.getElementById("menu");

menu.addEventListener("mouseenter", show);
menu.addEventListener("mouseleave", hide);

menu.addEventListener("click", show);
document.addEventListener("click", function (){
  console.log(this != menu);
	if (this != menu){
		document.getElementById("links").style.display="none";
	}
});

#menu{
	height: 10vh;
	background-color: red;
	text-align: center;
	transition: all 1s ease-out;
	padding-top: 5vh;
}

#menu:hover{
	color: red;
}

#envelope{
	height: 0;
	display: block;
	background-color: blue;
	min-width: 100%;
	z-index: 1;
	position: absolute;
	left: 0;
	content: "";
	opacity: 1;
	transition: all 1.3s ease-out;
}

#links{
	height: 0;
	display: none; 
	background-color: pink; 
  justify-content: center;
  z-index: 2;
  min-width: 100%;
  opacity: 0;
  transition: all 1s ease-in;
}

#google{
	margin-top: -1vh;
	width: 150px;
}

#mysite{
	padding-left: 5%;
	margin-top: -1vh;
	width: 150px;
}

	<div id="menu">Click here to browse the internet.
		<div id="envelope">
			<div id="links" >
				<div><a href="https://www.google.com"><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a></div>
				<div style="width: 20%;"></div>
				<div><a href="https://www.mywebsite.com/si/"><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></a></div>
			</div>
		</div>
	</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。