Question

我开发了一个 JS 函数，可以根据从后端 API 获取的数据在页面上动态呈现卡片。

代码如下：-

for (var i = 0; i < booking_data.length; i++) {
  var container = document.createElement("div");
  container.className = "container";

  var card = document.createElement("div");
  card.className = "card";

  //data tp append to the card
  var data = booking_data[i];

  var heading = document.createElement("h2");
  heading.textContent = "Booking ID: " + data["booking_id"] + "  (PAYMENT STATUS: " + data["booking_status"] + ")";

  var class_title = document.createElement("h2");
  class_title.textContent = data["title"];

  var parent_name = document.createElement("h4");
  parent_name.textContent = "Parent Name: " + data["user_name"];

  var start_date = document.createElement("h4");
  start_date.textContent = "Start Date: " + data["start_date"];

  var end_date = document.createElement("h4");
  end_date.textContent = "End Date: " + data["end_date"];

  card.appendChild(button);
  card.appendChild(heading);
  card.appendChild(class_title);
  card.appendChild(parent_name);
  card.appendChild(start_date);
  card.appendChild(end_date);



  container.appendChild(card);
  bookingEditForm.appendChild(container);

}

我想要做什么来实现当点击卡片上的按钮时，它会展开并显示表单。

Answer 1

我知道您想要一个可展开/可折叠的元素，它应该是您的卡片。为什么不探索 HTML 中的手风琴元素？我相信它会解决你的问题。
https://www.w3schools.com/howto/howto_js_accordion.asp - 您可以通过此链接查看基本的手风琴实现。

使用 Javascript 动态渲染扩展

1 个答案: