如何将内容锚定在手风琴组件内？

Question

我正在寻找滚动到手风琴内容的部分。我如何仅使用 id 和标签来做到这一点？我看到其他解决方案想做同样的事情，但它们使用 JavaScript 和 jquery，这是我试图避免的，因为我正在使用一个内容管理系统，该系统对自定义编码有一些限制，并且只有一个文本字段可以编辑HTML。（代码底部有一些 javascript，但我从 W3Schools 中提取了一个非常简单的设计来展示我想要做什么。）

这是我尝试过的方法，但不起作用：

var acc = document.getElementsByClassName("accordion");
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Accordion</h2>

<p><a href="#Anchor">Jump to a paragraph in Section 2</a></p>

<p class>

<button class="accordion">Section 1</button>
<div class="panel">
  <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>

<button class="accordion">Section 2</button>
<div class="panel">
  <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>
  
    <p id="Anchor"> JUMP TO THIS CONTENT IN SECTION 2. <br> 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>

<button class="accordion">Section 3</button>
<div class="panel">
  <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>

</body>
</html>

Answer 1

如果使用

display: none

从文档中删除某个元素，您将无法滚动到该元素...您必须先重新显示它。

HTML 现在具有针对手风琴的正确语义...看看

<details>

元素。在实现手风琴时，使用此标记应该始终是您的首选。但是，即使使用此元素，您也无法滚动到折叠的手风琴内的锚点...您必须先展开它。

此代码片段中的脚本查找所有

href

属性以

开头的锚点，并向它们添加一个点击侦听器。侦听器确定锚点的目标是否包含在闭合的

<details>

元素中，如果是，则打开该元素。

document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', evt => {
    const id = evt.target.href.split('#')[1]
    const d = document.getElementById(id).closest('details')
    if (d && !d.open) d.setAttribute('open', '')
  })
})

details {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin: 1em 0;
}

details:hover {
  background-color: #ccc; 
}

<h2>Accordion</h2>

<p><a href="#Anchor">Jump to a paragraph in Section 2</a></p>

<details>
  <summary>Section 1</summary>
  <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>
</details>

<details>
  <summary>Section 2</summary>
  <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>
  <p id="Anchor"> JUMP TO THIS CONTENT IN SECTION 2. <br> 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>
</details>

<details>
  <summary>Section 3</summary>
  <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>
</details>

<p><a href="https://microsoft.com">Microsoft</a></p>

如何将内容锚定在手风琴组件内？

问题描述投票：0回答：1

1个回答

最新问题

如何将内容锚定在手风琴组件内？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1