如何使用切换按钮根据单击的按钮显示元素？

Question

我想根据单击的按钮切换内容。 我有一个事件列表，所有事件都有一个按钮：“显示拼车者”。 每次我单击按钮时，都会显示该特定事件的拼车者列表。

• X 是所有拼车者的列表（ ul标签）
• Y 是所有按钮（ h4标签）

var x = document.getElementsByClassName("lijstcarpoolers");
var y = document.getElementsByClassName("bekijkcarpoolers");
var i;
for (i = 0; i < y.length; i++) {
  y[i].addEventListener('click', setcssclass() {
    if (x[i].style.display === "none") {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  });
}

我怎样才能做到这一点？

编辑：

这是所有列表的图片：

截屏

“Bekijkcarpoolers”或 var y 是“Bekijk medecarpoolers”按钮。 'Lijstcapoolers' 或 var x 是有边界的列表。

在这张照片中，我展示了所有这些。 但是当我把它们展示出来时：没有，点击“Bekijk medecarpoolers”时只有第二个和第四个打开。

编辑 2

 <?php $my_attendees = tribe_tickets_get_attendees( $product_id ); ?> <h4 class="bekijkcarpoolers" style="display: block; cursor: pointer;">Bekijk medecarpoolers</h4> <ul class="attendee_list_my_account lijstcarpoolers"> <?php foreach ($my_attendees as $attendee) { $user_info = get_userdata($attendee['user_id']); ?>

H4是一个可以点击的。

Answer 1

像这样使用事件委托：

document.addEventListener("click", function(ev) {
  var target = ev.target;

  if(target.classList.contains("bekijkcarpoolers")) {
    var ulElement = target.nextElementSibling;
    ulElement.classList.toggle("hidden");
  }
});

这会向文档添加一个单击事件侦听器。 当文档中发生点击时，我们获取该点击的目标并检查它是否是bekijkcarpoolers元素，如果是，我们获取该目标的下一个元素兄弟，这是我们的ul元素，我们切换其hidden的 class应该相应地显示/隐藏它。

然后添加一个样式：

.hidden { display: none; }

并使用它来隐藏/显示元素而不是内联样式style="display: none/block" 。