Question

我已经从中采样了一些代码；
https://www.w3schools.com/howto/howto_js_collapsible.asp

如何添加
id =“ link2”
每个可折叠的物体，
这样，当我通过锚链接访问内容时，可折叠内容就会扩展为内容。

例如：
AnimatedCollapsible.html＃link2

我已经阅读了有关S.O.的其他扩展链接主题，
但是我很难理解如何使扩展链接正常工作。

谢谢您的任何建议。

<!DOCTYPE html>
<html>
<head>


<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<button class="collapsible">Open Section 1</button><div class="content"><p>1.</p></div>
<button class="collapsible">Open Section 2</button><div class="content"><p>2.</p></div>
<button class="collapsible">Open Section 3</button><div class="content"><p>3.</p></div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

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

</body>
</html>

使用id链接展开可折叠

0 个答案: