在按钮单击时为多个元素切换类

Question

我有一系列的按钮，当点击时会显示一个带有选项的框，但当我点击其他按钮时，框保持可见。当我单击一个按钮或其他框外消失时，我该怎么办？

<div class="container">
    <button class="popup-btn" data-itemid="1"> Button 1</button> 
    <input type="text" id="alvo-1" />
    <div id="popup-1" class="popup">
        <li data-alvo="1">item 1</li>
        <li data-alvo="1">item 2</li>
        <li data-alvo="1">item 3</li>
    </div>
</div>

<div class="container">
    <button class="popup-btn" data-itemid="2"> Button 2</button>
    <input type="text" id="alvo-2" />
    <div id="popup-2" class="popup">
        <li data-alvo="2">item 1</li>
        <li data-alvo="2">item 2</li>
        <li data-alvo="2">item 3</li>
    </div>
</div>



.container{
  position: relative;
}
 .popup {
  position: absolute;
  display: none;
}

.popup.visible {
  display: block;
}




var button = document.querySelectorAll(".popup-btn")
var pop = document.querySelectorAll(".popup")
var li = document.querySelectorAll("li")



button.forEach(item => {
  item.addEventListener('click', () => {

    let popup = document.getElementById("popup-" + event.target.dataset.itemid);
        popup.classList.toggle("visible");

  })
})


li.forEach(item => {
 item.addEventListener('click', () => {

    let alvo = document.getElementById("alvo-" + event.target.dataset.alvo);
        alvo.value = event.target.innerHTML

    let popup = item.parentNode;
        popup.classList.toggle("visible");

  })        
})

我试图在按钮内部使用forEach，但它不起作用

jsfiddle example

Answer 1

​

document.querySelectorAll(".popup-btn").forEach(item => {

  item.addEventListener('click', event => {

    /* Reset visible state of all popup lists to hidden */
    document
      .querySelectorAll(".popup")
      .forEach(popup => popup.classList.remove('visible'));

    /* Update visible state of sibling popup list (relative to clicked
    button) by selecting .popup from this buttons parent */
    const parentContainer = event
      .currentTarget
      .parentElement;

    const siblingPopup = parentContainer
      .querySelector('.popup');

    siblingPopup
      .classList
      .add("visible");
  })
});

/* Setup "hide" behavior when user clicks outside of a visible popup box */
document.querySelectorAll(".popup").forEach(popup => {
  popup.addEventListener('click', event => {
    if (event.target === popup) {
      popup
        .classList
        .remove("visible");
    }
  });
});

.container {
  position: relative;
}

.popup {
  position: absolute;
  background: red;
  display: none;
}

.popup.visible {
  display: block;
}

/* Create invisble region that triggers
the popup to hide when clicked */
.popup.visible:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="container">
  <button class="popup-btn"> Button 1</button>
  <input type="text">
  <ul class="popup">
    <li data-alvo="1">item 1</li>
    <li data-alvo="1">item 2</li>
    <li data-alvo="1">item 3</li>
  </ul>
</div>

<div class="container">
  <button class="popup-btn"> Button 2</button>
  <input type="text">
  <ul class="popup">
    <li data-alvo="2">item 1</li>
    <li data-alvo="2">item 2</li>
    <li data-alvo="2">item 3</li>
  </ul>
</div>

​

Answer 2

一种方法是通过该按钮parentElement选择同级弹出窗口(相对于被单击的按钮)。这样做的一个好处是，它消除了对自定义data属性的依赖(即在按钮标记中)。

此外，为了实现用户在弹出框外单击时的隐藏行为，您可以使用CSS伪元素来“捕捉”在弹出框“内部内容”之外的用户单击：

.popup.visible:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

这里的想法是通过CSS定义一个临时的不可见元素，只有在弹出窗口可见时才会出现。单击时，此不可见元素在相应的弹出窗口上触发单击事件，此时您可以确定是否应隐藏弹出窗口(即弹出窗口是否与event.target匹配)：

​

document.querySelectorAll(".popup-btn").forEach(item => {

  item.addEventListener('click', event => {

    /* Reset visible state of all popup lists to hidden */
    document
      .querySelectorAll(".popup")
      .forEach(popup => popup.classList.remove('visible'));

    /* Update visible state of sibling popup list (relative to clicked
    button) by selecting .popup from this buttons parent */
    const parentContainer = event
      .currentTarget
      .parentElement;

    const siblingPopup = parentContainer
      .querySelector('.popup');

    siblingPopup
      .classList
      .add("visible");
  })
});

/* Setup "hide" behavior when user clicks outside of a visible popup box */
document.querySelectorAll(".popup").forEach(popup => {
  popup.addEventListener('click', event => {
    if (event.target === popup) {
      popup
        .classList
        .remove("visible");
    }
  });
});

.container {
  position: relative;
}

.popup {
  position: absolute;
  background: red;
  display: none;
}

.popup.visible {
  display: block;
}

/* Create invisble region that triggers
the popup to hide when clicked */
.popup.visible:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="container">
  <button class="popup-btn"> Button 1</button>
  <input type="text">
  <ul class="popup">
    <li data-alvo="1">item 1</li>
    <li data-alvo="1">item 2</li>
    <li data-alvo="1">item 3</li>
  </ul>
</div>

<div class="container">
  <button class="popup-btn"> Button 2</button>
  <input type="text">
  <ul class="popup">
    <li data-alvo="2">item 1</li>
    <li data-alvo="2">item 2</li>
    <li data-alvo="2">item 3</li>
  </ul>
</div>

​