关闭一个弹出窗口，打开另一个

Question

我的弹出窗口工作得很好，但点击时它们都会保持打开状态，而不是一次只允许一个弹出窗口。我发现有人问过这个问题，但我认为我对 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>
  &nbsp; &nbsp; &nbsp;
  <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 ;}
}

Answer 1

尝试以下方法：

var lastPopup;
function myFunction(event) {
  lastPopup && lastPopup.classList.remove("show");
  lastPopup = event.target.children[0];
  lastPopup.classList.toggle("show");
}