单击同一页面中的链接时，如何打开手风琴的一部分

Question

i有一个页面，该页面默认情况下闭合了手风琴功能，并在单击内容时打开，以箭头指示。我在页面顶部有一个链接，我希望它跳到手风琴内容的特定部分并打开它。我的JavaScript知识非常有限，因此我很难使它起作用！目前什么都不做。任何帮助，将不胜感激。

我尝试了页面顶部的锚点链接，该链接与内容一起跳到手风琴的区域，但我不确定要点什么以使内容部分打开。

这是我想锚定并打开手风琴内容的初始链接：

<p class="text_center"> 
  We've made some changes to our Privacy Policy - 
  <a href="#updates" style="color:red; text-decoration:none;">
    <span style="color:red;">
      <strong>click here</strong> 
      to see the changes
    </span>
  </a>
</p>

这是单击链接时我想打开的手风琴部分：

<div class="about-panel2" id="updates">

这是" awt-panel2"的CSS：

.about-panel2 {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}   

这是脚本：

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

单击时，该页面尝试跳到内容，但手风琴没有显示。我知道我需要修改(？(脚本来制作这项工作，但我不知道下一步该怎么办！任何帮助将不胜感激。预先感谢。

Answer 1

您可以通过单击该链接将active类添加到该手风琴中来做到这一点。

示例：

添加OnClick事件

<p class="text_center"> 
  We've made some changes to our Privacy Policy - 
  <a href="#updates" style="color:red; text-decoration:none;" onclick="openAccordian('updates')">
    <span style="color:red;">
      <strong>click here</strong> 
      to see the changes
    </span>
  </a>
</p>

在脚本中添加函数

<script>
  function openAccordian(id) {
    document.getElementById(id).classList.toggle("active");
  }
</script>

Answer 2

嗨，雷切尔，欢迎来。

要这样做，您需要插入少量JS

var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
} 

这允许手风琴从外部链接打开。有关更详细的示例和说明，请访问本教程