javascript - 选项卡和可折叠在同一页面上

Question

我是一名教师，我正在尝试为我的学生创建一个类(class)+资源网站，但我遇到了一些问题，非常感谢一些帮助。

我试图在同一页面上使用选项卡和可折叠，但我认为我的脚本正在相互交互，但我不太确定。任何帮助将不胜感激。我刚刚开始学习网页设计，所以我仍然经常遇到问题。

https://jsbin.com/talegesiqi/1/edit?html,output

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();


 // Collapsible
 var coll = document.getElementsByClassName("collapsible");
 var x;

  for (x = 0; x < coll.length; x++)  {
 coll[x].addEventListener("select", function() {
  this.classList.toggle("open");
  var content = this.nextElementSibling;
    if (content.style.maxHeight){
  content.style.maxHeight = null;
  } else {
  content.style.maxHeight = content.scrollHeight + "px";
  } 
  });
}
</script>

谢谢!

Answer 1

在运行您的代码时，我遇到了一些错误(第一个错误是“未捕获的类型错误:无法读取 null 的属性“点击””)。

好吧，我稍微简化了你的代码:

var coll = document.querySelectorAll(".collapsible");

for (let x = 0; x < coll.length; x++)  {
  coll[x].onclick=function (){
    const openCol="#"+this.getAttribute('data-collapsible');
    
    
    document.querySelectorAll(openCol).classList.toggle("open");
  }
}

我将 getElementsByClassName 更改为 querySelectorAll，因为我认为这是一种更简单的方法(您也将创建一个数组，但选择作为 CSS 选择器)。

在你的循环中，创建一个 onclick 监听器会更容易，然后，当你单击 .collapsible 时，它​​会检查属性 data-collapsible (我添加了该属性)，这将是你想要的元素的 ID展示。这样您就可以将其放在页面上的任何位置。

最后，在您想要显示的元素上，它应该具有您在 data-collapsible 上设置的 ID(在本例中我设置了“col01”，但您可以使用您想要的任何内容)。这样，您就可以拥有多个 .collapsible。

最后一个问题是在你的CSS上，你在.content上做得对，但是当你添加.open类时，你没有覆盖溢出的行为。因此，您需要这样做:

.content.open{
   overflow: unset;
}

这样，只有当.content打开时页面才会显示它。

您可以在这里看到它的工作情况:https://codepen.io/grloch/pen/QWwJEOa希望我能解决问题。

PS，你可以使用 Bootstrap 来做到这一点，看这里 https://getbootstrap.com/docs/4.1/components/collapse/