我的弹出窗口工作正常,但是单击时它们都将保持打开状态,而不是一次只允许一个弹出窗口。我发现这个问题被问到了,但是我认为我对JS的底层知识并不能让我轻松地将别人代码的答案修改为自己的答案。大时间菜鸟在这里
JS
` function myFunction(event) {
event.target.children[0].classList.toggle("show");
}`
的HTML
<div class="popup" onclick="myFunction(event)">Select 1 <span class="popuptext" id="myPopup">Tet Here </span></div>
<div class="popup" onclick="myFunction(event)">Select 2 <span class="popuptext" id="myPopup1"> Text Here</span></div>
选择3文本在这里
的CSS
.page-writing .popup {
height: 3em:
width: 3em;
position: relative;
position: relative;
display: inline-block;
cursor: pointer;
font-family:bookmania, serif;
font-size: .8rem;
color: black;
-webkit-opacity: .6;
-moz-opacity: .6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-writing .popuptext {
visibility: hidden;
height: 6em;
width: 20em;
color: purple;
overflow: auto;
text-align:left;
border-radius: 1em;
padding: 1em;
position: absolute;
z-index: 1;
top: 85%;
left: 0%;
margin-top: .5em;
}
.page-writing .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px:
border-width 2px;
border-style:none;
border-color: transparent;
}
.page-writing .popup .show{
visibility: visible;
-webkit-animation: easeIn 1.5s;
animation: easeIn 1.5s;
}
@-webkit-keyframes easeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes easeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
请尝试以下方法:
var lastPopup;
function myFunction(event) {
lastPopup && lastPopup.classList.remove("show");
lastPopup = event.target.children[0];
lastPopup.classList.toggle("show");
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句