CSS 显示 Span，当 Div 失去焦点（或按下另一个 div 时隐藏 Span）
CSS show Span, hide Span when Div lost focus (or another div is pressed)
我想在另一个 Div onClick 事件出现时隐藏一个跨度....
我没有使用 JQuery.
代码在这里...
https://jsfiddle.net/s24drt10/
我的HTML:
<div class="outer">
<div onclick="showPopup('spanApasionados')" onfocusout="showPopup('spanApasionados')" class="apasionados popup">
<div class="inner">Apasionado
<span class="spanDown popuptext" id="spanApasionados">Bla Bla Con pasión</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanReferentes')" onfocusout="showPopup('spanReferentes')" class="referentes popup">
<div class="inner">Referente
<span class="spanDown popuptext" id="spanReferentes">Porque puedo hacer cosas bla bla.</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanProtectores')" onfocusout="showPopup('spanProtectores')" class="protectores popup">
<div class="inner">Protector
<span class="spanDown popuptext" id="spanProtectores">Protejo mi entorno bla, bla.</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanEjecutores')" onfocusout="showPopup('spanEjecutores')" class="ejecutores popup">
<div class="inner">Ejecutor
<span class="spanUp popuptext" id="spanEjecutores">Siepr ejecutando bla, blah.</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanCocreadores')" onfocusout="showPopup('spanCocreadores')" class="cocreadores popup">
<div class="inner">Cocreador
<span class="spanUp popuptext" id="spanCocreadores">Concreando, bla, bla....</span>
</div>
</div>
</div>
我的CSS
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 40vh;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: absolute;
z-index: 99 !important;
left: 7.5vh;
right: 70px;
margin-left: -10vh;
}
/* Popup arrow uptriangle*/
.inner .spanDown::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
margin-right: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
/* Popup arrow downtriangle*/
.inner .spanUp::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.inner .spanDown {
top: 61px;
}
.inner .spanUp {
bottom: 60px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
div.apasionados {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.referentes {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.protectores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.ejecutores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.cocreadores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
我的Javascript代码
// When the user clicks on div, show the popup
function showPopup(id) {
var popup = document.getElementById(id);
popup.classList.toggle("show");
}
// When the user clicks on div, hide the popup
function hidePopup(id) {
var popup = document.getElementById(id);
popup.classList.toggle("hide");
}
但是，我的代码不起作用...
我先用 onfocusout="hidePopup('spanXXXXXX') 进行测试，但没有用....
- 如何解决？
- 我需要使用其他活动吗？
- 这是我的方法。我为
<div class="outer">、<div class="popup"> 和 <span>. 创建了 3 个事件监听器
- 使用
classList.add() 和 classList.remove() 代替 classList.toggle()。
- 当创建 div
click 事件时，代码必须有一个 if 语句，以便查看该事件是由 te div 还是由div，这就是这部分代码的原因 if (evt.target == this){。
- 我删除了
onClick 和 onfocusout，因为我正在使用 eventListeners。
outers.addEventListener是在<div class="popup">外点击时隐藏所有弹窗。
var allPopups = Array.from(document.getElementsByClassName("popuptext"));
var alldivs = Array.from(document.getElementsByClassName("popup"));
var outers = Array.from(document.getElementsByClassName("outer"));
outers.forEach(function (e){
e.addEventListener("click", function(evt) {
if (evt.target == this) { //very important
allPopups.forEach(el => el.classList.add("hide"));
}
});
});
// When the user clicks on div, hide the popup
alldivs.forEach(function (e){
e.addEventListener("click", function(evt) {
if (evt.target == this){ //very important
allPopups.forEach(el => el.classList.add("hide"));
this.children[0].children[0].classList.remove("hide");
this.children[0].children[0].classList.add("show");
}
});
});
// When the user clicks on div, hide the popup
allPopups.forEach(function (e){
e.addEventListener("click", function() {
this.classList.remove("show");
this.classList.add("hide");
});
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 40vh;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: absolute;
z-index: 99 !important;
left: 7.5vh;
right: 70px;
margin-left: -10vh;
}
/* Popup arrow uptriangle*/
.inner .spanDown::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
margin-right: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
/* Popup arrow downtriangle*/
.inner .spanUp::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.inner .spanDown {
top: 61px;
}
.inner .spanUp {
bottom: 60px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
div.apasionados {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.referentes {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.protectores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.ejecutores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.cocreadores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
<div class="outer">
<div class="apasionados popup">
<div class="inner">Apasionado
<span class="spanDown popuptext" id="spanApasionados">Bla Bla Con pasión</span>
</div>
</div>
</div>
<div class="outer">
<div class="referentes popup">
<div class="inner">Referente
<span class="spanDown popuptext" id="spanReferentes">Porque puedo hacer cosas bla bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="protectores popup">
<div class="inner">Protector
<span class="spanDown popuptext" id="spanProtectores">Protejo mi entorno bla, bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="ejecutores popup">
<div class="inner">Ejecutor
<span class="spanUp popuptext" id="spanEjecutores">Siepr ejecutando bla, blah.</span>
</div>
</div>
</div>
<div class="outer">
<div class="cocreadores popup">
<div class="inner">Cocreador
<span class="spanUp popuptext" id="spanCocreadores">Concreando, bla, bla....</span>
</div>
</div>
</div>
可能不是最好的方法，但我认为您只需要在显示点击的跨度之前迭代跨度
// When the user clicks on div, show the popup
function showPopup(id) {
let open_popups = document.querySelectorAll('.popuptext');
for (let i = 0; i < open_popups.length; i++) {
hidePopup(open_popups[i].id);
}
var popup = document.getElementById(id);
popup.classList.remove("hide");
popup.classList.add("show");
}
// When the user clicks on div, hide the popup
function hidePopup(id) {
var popup = document.getElementById(id);
popup.classList.remove("show");
popup.classList.add("hide");
}
根据 Rafael 的响应...（同一按钮中的切换状态）
function showPopup(id) {
var popup = document.getElementById(id);
var status = popup.classList.contains("show");
let open_popups = document.querySelectorAll('.popuptext');
for (let i = 0; i < open_popups.length; i++) {
hidePopup(open_popups[i].id);
}
popup.classList.remove("hide");
if (status) {
popup.classList.remove("show");
} else {
popup.classList.add("show");
}
}
// When the user clicks on div, hide the popup
function hidePopup(id) {
var popup = document.getElementById(id);
popup.classList.remove("show");
popup.classList.add("hide");
}
更简单的形式
function showPopup(id) {
let open_popups = document.querySelectorAll('.popuptext');
for (let i = 0; i < open_popups.length; i++) {
if (open_popups[i].classList.contains("show") || id == open_popups[i].id) {
open_popups[i].classList.toggle("show");
}
}
}
我会使用 JS 添加事件侦听器，而不是使用 HTML 属性。我还会在主体上添加一个点击事件，这样当用户点击 div，进入 body 时，弹出窗口被隐藏。
然后您可以遍历每个 div.popup 元素并为每个元素添加一个事件侦听器。在该事件侦听器中，您可以使用 Event.currentTarget 来获取对 div 的点击，并对该元素使用 querySelector() 方法，您可以获得 child span.popuptext元素并将其传递给函数。
然后该函数遍历每个 span.popuptext 元素，如果它是 div 上单击的 child，则将切换 .show class，或者删除 .show class 如果它不是 child。这样您就可以通过单击相同的 div 将其关闭或打开，否则如果更改为不同的 div.
，它将隐藏之前的弹出窗口
我希望一切都有意义并回答你所有的问题。
有关工作示例，请参见下面的代码段：
// Hide all popups when clicking outside of the div in the body
document.querySelector(`body`).addEventListener(`click`, event => {
togglePopups(event.currentTarget)
});
// Iterate over each div.popup
document.querySelectorAll(`div.popup`).forEach(div => {
// Add an event listener to each div.popup
div.addEventListener(`click`, event => {
//stop event from bubbling up and triggering the body.click event
event.stopPropagation();
//get the span.popuptext child element of the clicked on div
const spanElement = event.currentTarget.querySelector(`.popuptext`);
// Call function
togglePopups(spanElement)
});
})
//Toggle the show class of clicked on popup and remove all others
function togglePopups(target) {
// Iterate over each span.popuptext element
document.querySelectorAll(`span.popuptext`).forEach(element => {
// Toggle the class if the span element matches the target
if (element === target) {
element.classList.toggle(`show`);
}
// Remove the class if the span element does not match the target
else {
element.classList.remove(`show`);
}
});
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
/*width: 40vh;*/
width: fit-content;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: absolute;
z-index: 99 !important;
left: 50%;
transform: translateX(-50%);
}
/* Popup arrow uptriangle*/
.popup .spanDown::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
margin-right: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
/* Popup arrow downtriangle*/
.popup .spanUp::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .spanDown {
top: 61px;
}
.popup .spanUp {
bottom: 60px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div.popup {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
<div class="outer">
<div class="apasionados popup">
<div class="inner">Apasionado
<span class="spanDown popuptext" id="spanApasionados">Bla Bla Con pasión</span>
</div>
</div>
</div>
<div class="outer">
<div class="referentes popup">
<div class="inner">Referente
<span class="spanDown popuptext" id="spanReferentes">Porque puedo hacer cosas bla bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="protectores popup">
<div class="inner">Protector
<span class="spanDown popuptext" id="spanProtectores">Protejo mi entorno bla, bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="ejecutores popup">
<div class="inner">Ejecutor
<span class="spanUp popuptext" id="spanEjecutores">Siepr ejecutando bla, blah.</span>
</div>
</div>
</div>
<div class="outer">
<div class="cocreadores popup">
<div class="inner">Cocreador
<span class="spanUp popuptext" id="spanCocreadores">Concreando, bla, bla....</span>
</div>
</div>
</div>
我想在另一个 Div onClick 事件出现时隐藏一个跨度....
我没有使用 JQuery.
代码在这里... https://jsfiddle.net/s24drt10/
我的HTML:
<div class="outer">
<div onclick="showPopup('spanApasionados')" onfocusout="showPopup('spanApasionados')" class="apasionados popup">
<div class="inner">Apasionado
<span class="spanDown popuptext" id="spanApasionados">Bla Bla Con pasión</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanReferentes')" onfocusout="showPopup('spanReferentes')" class="referentes popup">
<div class="inner">Referente
<span class="spanDown popuptext" id="spanReferentes">Porque puedo hacer cosas bla bla.</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanProtectores')" onfocusout="showPopup('spanProtectores')" class="protectores popup">
<div class="inner">Protector
<span class="spanDown popuptext" id="spanProtectores">Protejo mi entorno bla, bla.</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanEjecutores')" onfocusout="showPopup('spanEjecutores')" class="ejecutores popup">
<div class="inner">Ejecutor
<span class="spanUp popuptext" id="spanEjecutores">Siepr ejecutando bla, blah.</span>
</div>
</div>
</div>
<div class="outer">
<div onclick="showPopup('spanCocreadores')" onfocusout="showPopup('spanCocreadores')" class="cocreadores popup">
<div class="inner">Cocreador
<span class="spanUp popuptext" id="spanCocreadores">Concreando, bla, bla....</span>
</div>
</div>
</div>
我的CSS
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 40vh;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: absolute;
z-index: 99 !important;
left: 7.5vh;
right: 70px;
margin-left: -10vh;
}
/* Popup arrow uptriangle*/
.inner .spanDown::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
margin-right: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
/* Popup arrow downtriangle*/
.inner .spanUp::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.inner .spanDown {
top: 61px;
}
.inner .spanUp {
bottom: 60px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
div.apasionados {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.referentes {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.protectores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.ejecutores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.cocreadores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
我的Javascript代码
// When the user clicks on div, show the popup
function showPopup(id) {
var popup = document.getElementById(id);
popup.classList.toggle("show");
}
// When the user clicks on div, hide the popup
function hidePopup(id) {
var popup = document.getElementById(id);
popup.classList.toggle("hide");
}
但是，我的代码不起作用...
我先用 onfocusout="hidePopup('spanXXXXXX') 进行测试，但没有用....
- 如何解决？
- 我需要使用其他活动吗？
- 这是我的方法。我为
<div class="outer">、<div class="popup">和<span>. 创建了 3 个事件监听器
- 使用
classList.add()和classList.remove()代替classList.toggle()。 - 当创建 div
click事件时，代码必须有一个 if 语句，以便查看该事件是由 te div 还是由div，这就是这部分代码的原因if (evt.target == this){。 - 我删除了
onClick和onfocusout，因为我正在使用 eventListeners。 outers.addEventListener是在<div class="popup">外点击时隐藏所有弹窗。
var allPopups = Array.from(document.getElementsByClassName("popuptext"));
var alldivs = Array.from(document.getElementsByClassName("popup"));
var outers = Array.from(document.getElementsByClassName("outer"));
outers.forEach(function (e){
e.addEventListener("click", function(evt) {
if (evt.target == this) { //very important
allPopups.forEach(el => el.classList.add("hide"));
}
});
});
// When the user clicks on div, hide the popup
alldivs.forEach(function (e){
e.addEventListener("click", function(evt) {
if (evt.target == this){ //very important
allPopups.forEach(el => el.classList.add("hide"));
this.children[0].children[0].classList.remove("hide");
this.children[0].children[0].classList.add("show");
}
});
});
// When the user clicks on div, hide the popup
allPopups.forEach(function (e){
e.addEventListener("click", function() {
this.classList.remove("show");
this.classList.add("hide");
});
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 40vh;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: absolute;
z-index: 99 !important;
left: 7.5vh;
right: 70px;
margin-left: -10vh;
}
/* Popup arrow uptriangle*/
.inner .spanDown::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
margin-right: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
/* Popup arrow downtriangle*/
.inner .spanUp::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.inner .spanDown {
top: 61px;
}
.inner .spanUp {
bottom: 60px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
div.apasionados {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.referentes {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.protectores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.ejecutores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
div.cocreadores {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
<div class="outer">
<div class="apasionados popup">
<div class="inner">Apasionado
<span class="spanDown popuptext" id="spanApasionados">Bla Bla Con pasión</span>
</div>
</div>
</div>
<div class="outer">
<div class="referentes popup">
<div class="inner">Referente
<span class="spanDown popuptext" id="spanReferentes">Porque puedo hacer cosas bla bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="protectores popup">
<div class="inner">Protector
<span class="spanDown popuptext" id="spanProtectores">Protejo mi entorno bla, bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="ejecutores popup">
<div class="inner">Ejecutor
<span class="spanUp popuptext" id="spanEjecutores">Siepr ejecutando bla, blah.</span>
</div>
</div>
</div>
<div class="outer">
<div class="cocreadores popup">
<div class="inner">Cocreador
<span class="spanUp popuptext" id="spanCocreadores">Concreando, bla, bla....</span>
</div>
</div>
</div>
可能不是最好的方法，但我认为您只需要在显示点击的跨度之前迭代跨度
// When the user clicks on div, show the popup
function showPopup(id) {
let open_popups = document.querySelectorAll('.popuptext');
for (let i = 0; i < open_popups.length; i++) {
hidePopup(open_popups[i].id);
}
var popup = document.getElementById(id);
popup.classList.remove("hide");
popup.classList.add("show");
}
// When the user clicks on div, hide the popup
function hidePopup(id) {
var popup = document.getElementById(id);
popup.classList.remove("show");
popup.classList.add("hide");
}
根据 Rafael 的响应...（同一按钮中的切换状态）
function showPopup(id) {
var popup = document.getElementById(id);
var status = popup.classList.contains("show");
let open_popups = document.querySelectorAll('.popuptext');
for (let i = 0; i < open_popups.length; i++) {
hidePopup(open_popups[i].id);
}
popup.classList.remove("hide");
if (status) {
popup.classList.remove("show");
} else {
popup.classList.add("show");
}
}
// When the user clicks on div, hide the popup
function hidePopup(id) {
var popup = document.getElementById(id);
popup.classList.remove("show");
popup.classList.add("hide");
}
更简单的形式
function showPopup(id) {
let open_popups = document.querySelectorAll('.popuptext');
for (let i = 0; i < open_popups.length; i++) {
if (open_popups[i].classList.contains("show") || id == open_popups[i].id) {
open_popups[i].classList.toggle("show");
}
}
}
我会使用 JS 添加事件侦听器，而不是使用 HTML 属性。我还会在主体上添加一个点击事件，这样当用户点击 div，进入 body 时，弹出窗口被隐藏。
然后您可以遍历每个 div.popup 元素并为每个元素添加一个事件侦听器。在该事件侦听器中，您可以使用 Event.currentTarget 来获取对 div 的点击，并对该元素使用 querySelector() 方法，您可以获得 child span.popuptext元素并将其传递给函数。
然后该函数遍历每个 span.popuptext 元素，如果它是 div 上单击的 child，则将切换 .show class，或者删除 .show class 如果它不是 child。这样您就可以通过单击相同的 div 将其关闭或打开，否则如果更改为不同的 div.
我希望一切都有意义并回答你所有的问题。
有关工作示例，请参见下面的代码段：
// Hide all popups when clicking outside of the div in the body
document.querySelector(`body`).addEventListener(`click`, event => {
togglePopups(event.currentTarget)
});
// Iterate over each div.popup
document.querySelectorAll(`div.popup`).forEach(div => {
// Add an event listener to each div.popup
div.addEventListener(`click`, event => {
//stop event from bubbling up and triggering the body.click event
event.stopPropagation();
//get the span.popuptext child element of the clicked on div
const spanElement = event.currentTarget.querySelector(`.popuptext`);
// Call function
togglePopups(spanElement)
});
})
//Toggle the show class of clicked on popup and remove all others
function togglePopups(target) {
// Iterate over each span.popuptext element
document.querySelectorAll(`span.popuptext`).forEach(element => {
// Toggle the class if the span element matches the target
if (element === target) {
element.classList.toggle(`show`);
}
// Remove the class if the span element does not match the target
else {
element.classList.remove(`show`);
}
});
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
/*width: 40vh;*/
width: fit-content;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: absolute;
z-index: 99 !important;
left: 50%;
transform: translateX(-50%);
}
/* Popup arrow uptriangle*/
.popup .spanDown::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
margin-right: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
/* Popup arrow downtriangle*/
.popup .spanUp::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .spanDown {
top: 61px;
}
.popup .spanUp {
bottom: 60px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div.popup {
background-image: url(https://thumbs.dreamstime.com/b/cyan-texture-background-space-your-text-use-as-wallpaper-poster-banner-designs-cyan-texture-background-172346179.jpg);
color: white !important;
border: none;
width: 309px;
height: 69px;
background-size: cover;
font-family: Gotham Book !important;
font-weight: normal !important;
font-style: normal;
text-shadow: none;
box-shadow: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 0px;
border-left: 0px;
border-right: 0px;
position: relative;
display: flex;
align-items: center;
}
<div class="outer">
<div class="apasionados popup">
<div class="inner">Apasionado
<span class="spanDown popuptext" id="spanApasionados">Bla Bla Con pasión</span>
</div>
</div>
</div>
<div class="outer">
<div class="referentes popup">
<div class="inner">Referente
<span class="spanDown popuptext" id="spanReferentes">Porque puedo hacer cosas bla bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="protectores popup">
<div class="inner">Protector
<span class="spanDown popuptext" id="spanProtectores">Protejo mi entorno bla, bla.</span>
</div>
</div>
</div>
<div class="outer">
<div class="ejecutores popup">
<div class="inner">Ejecutor
<span class="spanUp popuptext" id="spanEjecutores">Siepr ejecutando bla, blah.</span>
</div>
</div>
</div>
<div class="outer">
<div class="cocreadores popup">
<div class="inner">Cocreador
<span class="spanUp popuptext" id="spanCocreadores">Concreando, bla, bla....</span>
</div>
</div>
</div>