问题描述
我希望给定的手风琴标题在点击时移动到页面顶部。我为此使用了锚点。展开折叠时，单击下一个标题应将其关闭并将我单击的标题移至顶部并展开下一个折叠。
当我从顶部一个一个选择标题时，一切都很好。不幸的是，当我随机选择标题时，例如：当第一个折叠打开时我想转到第三个然后选择的标题（第三个）不会粘在页面顶部。
如何解决？
<!doctype html>
<html lang="pl">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta name="description" content="">
<title>Accordion problem</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.accordionbutt {
background-color: #eee;
border-bottom: 2px solid #444;
border-style: none;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
height: 8rem;
outline: none;
transition: 0.4s;
font-size: 2rem;
}
.accordionbutt:not(.collapsed) {
color: #000;
background-color: #ccc;
}
.accordionbutt:focus {
Box-shadow: none;
}
.accordionbutt:focus {
Box-shadow: none;
}
.accordionbutt:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(180deg);
}
</style>
</head>
<body class="bg-dark text-white" data-bs-spy="scroll" data-target="#nav-fixed">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="heading1">
<div class="anchor" id="1"></div> <!-- anchor -->
<button class="accordion-button accordionbutt collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1" onclick="window.location.href='#1';">
First collapse
</button>
</div>
<div class="anchor" id="2"></div> <!-- anchor -->
<div id="collapse1" class="accordion-collapse collapse" aria-labelledby="heading1" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet,consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading2">
<button class="accordion-button accordionbutt collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2" onclick="window.location.href='#2';">
Second collapse
</button>
</div>
<div class="anchor" id="3"></div> <!-- anchor -->
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading3">
<button class="accordion-button accordionbutt collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3" onclick="window.location.href='#3';">
Third collapse
</button>
</div>
<div class="anchor" id="4"></div> <!-- anchor -->
<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading4">
<button class="accordion-button accordionbutt collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4" onclick="window.location.href='#4';">
Fourth collapse
</button>
</div>
<div class="anchor" id="5"></div> <!-- anchor -->
<div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading5">
<button class="accordion-button accordionbutt collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5" onclick="window.location.href='#5';">
Fifth collapse
</button>
</div>
<div id="collapse5" class="accordion-collapse collapse" aria-labelledby="heading5S" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
https://jsfiddle.net/06cmg23d/
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）