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

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

1 个答案: