使用 HREF 标记在折叠菜单内导航

Question

我正在尝试使用 javascript 制作一个可折叠的 div，您可以在其中使用 href="#one" 标签导航和打开可折叠的 div。我尝试将 href 放在 div 内，但没有结果。我也尝试过制作

里面的 div 到一个锚文本，但仍然没有成功。但是我做的折叠不会在标签上打开，只能导航到它的区域，同时仍然被隐藏。

<div class="box" id="one "> <h1> Object One </h1> </div>
<button type="button" class="collapsible" > <a href="#one"> Read more </a> </button>
<div class="content" href="#one"> 

<p> Lorem ipsum dolor sit amet, consectetur adi
pisicing elit, sed do eiusmod tempor incidid
unt ut labore et dolore magna aliqua. Ut enim ad mini
m veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

javascript

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";
}
});
}

Jsfiddle：https://jsfiddle.net/wbyux172/1/

希望我能得到一些帮助:)

Answer 1

您可以使用 name 属性（或 id 属性创建指向命名锚点的链接 )。

在同一文档内链接时，A元素设置如下。

<a href="#anchorname">linked text</a>

(Target point)
<a name="anchorname">a named anchor</a>

click here 查看带有解释的工作示例。

查看此工作示例：

var cols = document.querySelectorAll(".collapsible");
cols.forEach((col) => {
  col.addEventListener("click", function() {
    this.classList.toggle("active");
    var contentArea = this.nextElementSibling;
    var content = contentArea.querySelector('.content');
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
});

.collapsible {
  background-color: #dedede;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.collapsible a{
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.content-area .content {
  border: 1px solid #dedede;
  display: none;
  padding: 10px;
}

<div class="box" id="one "><h1>Object One</h1></div>
<button type="button" class="collapsible" >
  <a href="#section1">Read more</a>
</button>
<div class="content-area">
  <a name="section1"></a>
  <div class="content">
    <p> Lorem ipsum dolor sit amet, consectetur adi
  pisicing elit, sed do eiusmod tempor incidid
  unt ut labore et dolore magna aliqua. Ut enim ad mini
  m veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>