我有一个代码，它为我提供了我站点中不同文章的列表。我希望能够将每个链接到我页面中的一个点。这就是我到目前为止所拥有的......我不是任何想象力的程序员，所以任何帮助将不胜感激。
就目前而言，顶部折叠和链接是唯一有效的。其他的没有被拾起或识别。最后一个将您带到 Reddit，但不会崩溃。
在此先感谢您提供的任何帮助。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #005B4F;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #00B528;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Contents</h2>
<button class="collapsible">A Message From Our Operations Manager - Gill Grant</button>
<div class="content">
<p><a href="https://sites.google.com/johnlewis.co.uk/issue309thoct2019/the-essentials#h.p_UtsjfkFFUDa7"> Welcome To This Week's Newsletter</p>
</div>
<div>
<button class="collapsible">Headlines</button>
<div class="content">
<p><a></br> href="https://sites.google.com/johnlewis.co.uk/issue309thoct2019/the-essentials#h.p_xxaZ53cPzgEW"> Teleopti - Issues, Feedback & Action</p>
</div>
<button class="collapsible">Customer Area</button>
<div class="content">
<p><a href= https://sites.google.com/johnlewis.co.uk/issue309thoct2019/the-essentials#h.p_vcv7X_qd3y7C> Gift Update</p>
</div>
<button class="collapsible">Staff Area</button>
<div class="content">
<p><a href= https://sites.google.com/johnlewis.co.uk/issue309thoct2019/the-essentials#h.p_tIP4bMaCaClp> Staff Rewards </br>
<a href= https://sites.google.com/johnlewis.co.uk/issue309thoct2019/the-essentials#h.p_6NMC5GiOaRcs> Autumn Beauty Box </br>
</div>
<script>
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.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
最佳答案
您的页面上有我收集的内容部分，您希望根据单击的按钮显示或隐藏这些部分。在你的内容 div s，将不同的部分移到其中，不是链接，而是页面上的 html 本身。
页面末尾的脚本，其作用是:
(1) 抓取带有 collapsible 的所有元素类(class)。这就是所有适用的导航按钮。
(2) 分配一个事件监听器，以便在单击按钮时显示紧随其后的元素(即 <div class="content"> )；这是通过设置它的高度来完成的。
您需要做的就是将每个部分的实际 html 内容放在适当的 <div class="content">...</div> 中。让脚本和它的 CSS 处理剩下的事情。
关于jquery - 如何分离 HTML 折叠列表中的超链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58503968/