Question

我有一个页面，默认情况下该页面具有手风琴功能，并在单击内容时打开该页面，如箭头所示。我在页面顶部有一个链接，我希望它跳到手风琴内容的特定部分并打开它。由于我的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">

以下是“ about-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

雷切尔，您好，欢迎来到SO。

为此，您需要插入少量JS

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

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

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

2 个答案: