CSS 显示 Span，当 Div 失去焦点（或按下另一个 div）时隐藏 Span

Question

我想隐藏一个跨度，当另一个 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') 进行测试，但无法正常工作....

• 如何解决？
• 我需要使用其他事件吗？

Answer 1

• 这是我的方法。我为<div class="outer">、<div class="popup"> 和<span> 创建了 3 个事件侦听器。
• 使用classList.add() 和classList.remove() 代替classList.toggle()。
• 当divclick事件被创建时，代码必须有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>

Answer 2

可能不是最好的方法，但我认为你只需要在显示点击之前迭代跨度

// 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");
}

Answer 3

基于 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");
    }
  }
}

Answer 4

我会使用 JS 添加事件侦听器而不是使用 HTML 属性。我还会在正文上添加一个点击事件，因此当用户点击div 之外的body 时，弹出窗口被隐藏。

然后您可以遍历每个 div.popup 元素并为每个元素添加一个事件侦听器。在该事件侦听器中，您可以使用Event.currentTarget 来获得对div 的点击，并在该元素上使用querySelector() 方法，您可以获得子span.popuptext 元素并将其传递给函数。

然后，该函数遍历每个 span.popuptext 元素，如果 .show 类是被点击的 div 的子类，则将切换它，如果它不是子类，则删除 .show 类。这样，您可以通过单击同一 div 将其关闭或打开，或者如果更改为不同的 div，它将隐藏以前的弹出窗口。

我希望一切都有意义并回答您的所有问题。

请参阅下面的 sn-p 以获取工作示例：

// 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>