javascript - 如果单击以 collapsible id 作为目标的链接，则打开 collapsible

Question

在我的代码中，您将看到一个按钮和一个可折叠元素。如果单击该按钮，页面将滚动到可折叠状态。

用户点击按钮后是否可以打开折叠？我考虑过使用视口(viewport)，但每次在视口(viewport)中时，折叠都会打开。

实时编辑器:https://www.w3schools.com/code/tryit.asp?filename=GD9IMIC5QGTK

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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.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;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>

<h2>Collapsibles</h2>
<div id="section2">
  <p>A Collapsible:</p>
  <button type="button" class="collapsible">Open Collapsible</button>
  <div class="content" id="section2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Answer 1

只需在单击链接时将可折叠 div 的显示样式设置为 block 即可。要获取元素的 href 值，可以使用 getAttribute('href')。然后，您可以使用从 getAttribute('href') 获取的值的 id 来定位 div 内 .collapsible 类的下一个同级元素>.

这是一个针对所有 anchor 的有效解决方案。

// Trigger a click on collapsible when a link visits it
var links = document.querySelectorAll('a')
links.forEach(link => {
  link.addEventListener('click', function(e) {
    const linkHref = link.getAttribute('href')
    const targetCollapsible = document.querySelector(`${linkHref} .collapsible`)
    if (targetCollapsible && targetCollapsible.nextElementSibling) targetCollapsible.nextElementSibling.style.display = 'block'
  })
})

// Your function
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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.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;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2>Collapsibles</h2>
<div id="section2">
  <p>A Collapsible:</p>
  <button type="button" class="collapsible">Open Collapsible</button>
  <div class="content" id="section2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

如果您的 .collapsible 的结构使其包含在 anchor href 引用的 id 元素内，并且您要更改的显示 CSS 样式是 .collapsible 类的下一个同级元素。更好的方法是为要设置样式的元素提供一个类，以便您可以直接选择它。