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

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

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

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

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

这里的想法是通过CSS定义一个临时的不可见元素，该元素仅在弹出窗口可见时才存在。单击时，此不可见元素会在相应的弹出窗口上触发click事件，此时您可以确定是否应隐藏该弹出窗口（即，该弹出窗口是否与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>

Answer 2

var buttons = document.querySelectorAll(".button");
    console.log(buttons);

    debugger

    buttons.forEach( btn => {
        btn.addEventListener('click', function() {
           
            var popups = document.querySelectorAll(".popup");
            popups.forEach( pop => {
                pop.classList.remove('show');
            })

            document.querySelector(`#${this.attributes.popup.value}`).classList.toggle('show');
        })
    })

.popup {
        border: 1px solid black;
        width: 100px;
        padding: 10px;
        display: none;
    }

    .show {
        display: block !important;
    }

<button class='button' popup="popup1">Button 01</button>
<button  class='button' popup="popup2">Button 02</button>
<button  class='button' popup="popup3">Button 03</button>

<div id="popup1" class='popup'>Im popup 1</div>
<div id="popup2" class='popup'>Im popup 2</div>
<div id="popup3" class='popup'>Im popup 3</div>

我做了这个例子...我认为它可以按照您的要求工作，希望对您有所帮助！

Answer 3

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>