使用HREF标签在折叠菜单中导航

问题描述

我正在尝试使用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/

希望我可以在此方面获得一些帮助：）

解决方法

您可以使用名称属性（或 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>