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

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()。
• 创建 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>

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，它将隐藏以前的弹出窗口。

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

请参阅下面的代码片段以获取工作示例：

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