我有一个使用 iframe 加载主要内容的 Drupal 客户端站点。最近，我为常见问题解答部分构建了一个纯 html/css Accordion 。 Accordion 在 iframe 之外按预期工作。但是，一旦在 iframe 中，呈现在折叠下方的元素(用户将滚动查看的任何元素)会导致页面在单击时跳到顶部。父级会增长以适应内容，但如果面板关闭，它不会缩小。我不确定这是 Drupal 问题还是我的代码中会导致父页面跳转的问题。我想找到一种方法来消除跳到顶部。
这是我的 Accordion :
/* FAQ styles */
.acc input {
position: absolute;
opacity: 0;
z-index: -1;
}
.acc .tabs {
border-radius: 2px;
overflow: hidden;
}
.acc .tab {
width: 100%;
overflow: hidden;
border-top: 2px solid #002c59;
}
.acc .tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
color: #002c59;
font-weight: bold;
cursor: pointer;
}
.acc .tab-label:hover {
background: #002c59;
color: #fff;
}
.acc .tab-label::after {
content: "\276F";
color: #fcaf35;
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
}
.acc .tab-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
transition: all .5s;
}
.acc .tab-content h2,
.tab-content h3 {
margin-top: 0;
}
.acc .tab-close {
display: flex;
justify-content: flex-end;
padding: 1em;
color: #fff;
background: #002c59;
cursor: pointer;
}
.acc .tab-close:hover {
background: #002c59;
color: #fcaf35;
}
.acc input:checked+.tab-label {
background: #002c59;
color: #fff;
}
.acc input:checked+.tab-label::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.acc input:checked~.tab-content {
max-height: 100vh;
padding: 1em;
}<p>Access important contact information, read through our Frequently Asked Questions or just seek Help.</p>
<div class="acc tabs">
<div class="tab">
<input type="checkbox" id="rd1" name="rd">
<label class="tab-label" for="rd1">Inventore veritatis et</label>
<div class="tab-content">
<h3>Sed ut perspiciatis</h3>
<p>Qui officia deserunt mollit anim id est laborum. Animi, id est laborum et dolorum fuga. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Fugiat quo voluptas nulla pariatur? Fugiat quo voluptas nulla pariatur?</p>
<h3>Nihil molestiae consequatur, vel illum qui dolorem eum?</h3>
<p>Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Itaque earum rerum hic tenetur a sapiente delectus. Architecto beatae vitae dicta sunt explicabo. Totam rem aperiam.</p>
<h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco?</h3>
<p>At vero eos et accusamus. Esse cillum dolore eu fugiat nulla pariatur. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
<ul>
<li>Esse cillum dolore eu fugiat nulla pariatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<p>Esse cillum dolore eu fugiat nulla pariatur. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd2" name="rd">
<label class="tab-label" for="rd2"> Et harum</label>
<div class="tab-content">
<h3>Duis aute irure dolor in reprehenderit in voluptate velit.</h3>
<p>Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<ul>
<li>Corrupti quos dolores et quas molestias excepturi sint occaecati.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
<li>Animi, id est laborum et dolorum fuga.</li>
</ul>
<p>Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</p>
<h2>Fugiat quo voluptas nulla pariatur?</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Totam rem aperiam. Corrupti quos dolores et quas molestias excepturi sint occaecati. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
<ol>
<li>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</li>
<li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</li>
<li>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</li>
</ol>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd3" name="rd">
<label class="tab-label" for="rd3">Ut aut reiciendis </label>
<div class="tab-content">
<h3>Neque porro quisquam est</h3>
<p>Qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<ul>
<li>Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</li>
<li>Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</li>
<li>Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</li>
</ul>
<p>Laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<ul>
<li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</li>
<li>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</li>
<li>Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</li>
</ul>
<h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa.</h3>
<p>Nihil molestiae consequatur, vel illum qui dolorem eum. Qui officia deserunt mollit anim id est laborum. Eaque ipsa quae ab illo inventore veritatis et quasi. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
<h3>Et iusto odio dignissimos ducimus qui blanditiis</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Architecto beatae vitae dicta sunt explicabo. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
<ul>
<li>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</li>
<li>Architecto beatae vitae dicta sunt explicabo.</li>
<li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</li>
</ul>
<p>YNunc fringilla, nunc in mattis. Mauris mollis risus sit amet. Quisque venenatis gravida dapibus a. Sed ornare, dolor in rhoncus. Ut hendrerit mollis felis, sed.</p>
<p>Phasellus consectetur volutpat tortor at. Cras eu purus ipsum, quis. Morbi ullamcorper porta risus, ac. Integer semper convallis purus vitae. Vestibulum facilisis, neque nec mollis.Suspendisse potenti purus velit. nisi. Nulla molestie magna nec nisi. Cras auctor, lectus nec semper. Quisque eget laoreet elit Praesent. Donec viverra ultricies fringilla interdum.</p>
<ol style="margin-top:5px;">
<li>Nunc fringilla, nunc in mattis. Mauris mollis risus sit amet. Quisque venenatis gravida dapibus a. Sed ornare, dolor in rhoncus. Ut hendrerit mollis felis, sed.</li>
<li>Proin dui nibh, facilisis sed. Aliquam leo nulla, adipiscing sed. Proin scelerisque lectus rhoncus erat. Pellentesque aliquet ante sed nunc. Phasellus ut nibh justo condimentum.</li>
<li>Suspendisse ullamcorper egestas molestie Proin. Mauris luctus ligula id nibh. Cras erat neque, dignissim in. In sapien nibh, tincidunt non. Sed sed mauris nibh purus.</li>
</ol>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd4" name="rd">
<label class="tab-label" for="rd4">Animi id est laborum</label>
<div class="tab-content">
<h3>Donec laoreet tincidunt sollicitudin </h3>
<p>Totam rem aperiam. Qui officia deserunt mollit anim id est laborum. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Eaque ipsa quae ab illo inventore veritatis et quasi. Itaque earum rerum hic tenetur a sapiente delectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
<h3>Nam sed magna urna quam</h3>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd5" name="rd">
<label class="tab-label" for="rd5">At vero</label>
<div class="tab-content">
<h3>Do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<p>Nihil molestiae consequatur, vel illum qui dolorem eum. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<h3>Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</h3>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Fugiat quo voluptas nulla pariatur? Laboris nisi ut aliquip ex ea commodo consequat. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd6" name="rd">
<label class="tab-label" for="rd6">Do eiusmod tempor incididunt</label>
<div class="tab-content">
<h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
<ul>
<li>Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</li>
<li>Do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Corrupti quos dolores et quas molestias excepturi sint occaecati.</li>
</ul>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Eaque ipsa quae ab illo inventore veritatis et quasi. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>emo enim ipsam voluptatem quia voluptas?</h3>
<p>At vero eos et accusamus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Qui officia deserunt mollit anim id est laborum.</p>
<p>Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Eaque ipsa quae ab illo inventore veritatis et quasi. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
<p>Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Itaque earum rerum hic tenetur a sapiente delectus. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd7" name="rd">
<label class="tab-label" for="rd7">Corrupti quos dolores</label>
<div class="tab-content">
<h3>Cupiditate non provident?</h3>
<p>Esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, id est laborum et dolorum fuga. Fugiat quo voluptas nulla pariatur? Et harum quidem rerum facilis est et expedita distinctio. Animi, id est laborum et dolorum fuga.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd8" name="rd">
<label class="tab-label" for="rd8">Hardware & Software</label>
<div class="tab-content">
<h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</h3>
<p>Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. At vero eos et accusamus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa. Totam rem aperiam. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
<h3>Laboris nisi ut aliquip ex ea commodo consequat.</h3>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<ol>
<li>Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</li>
<li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</li>
<li>Eaque ipsa quae ab illo inventore veritatis et quasi.</li>
</ol>
<h3>Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<ul>
<li>Animi, id est laborum et dolorum fuga.</li>
<li>Et harum quidem rerum facilis est et expedita distinctio.</li>
<li>Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</li>
</ul>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Laboris nisi ut aliquip ex ea commodo consequat. Qui officia deserunt mollit anim id est laborum.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Esse cillum dolore eu fugiat nulla pariatur. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd9" name="rd">
<label class="tab-label" for="rd9">Et iusto odio dignissimos</label>
<div class="tab-content">
<h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</h3>
<p>Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<ul>
<li>Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</li>
<li>Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</li>
<li>Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</li>
</ul>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Corrupti quos dolores et quas molestias excepturi sint occaecati. Animi, id est laborum et dolorum fuga. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
<h3>Laboris nisi ut aliquip ex ea commodo consequat.</h3>
<p>Architecto beatae vitae dicta sunt explicabo. Esse cillum dolore eu fugiat nulla pariatur. Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
<ul>
<li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</li>
<li>Qui officia deserunt mollit anim id est laborum.</li>
<li>Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</li>
</ul>
<h3>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</h3>
<p>Itaque earum rerum hic tenetur a sapiente delectus. Itaque earum rerum hic tenetur a sapiente delectus. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo. Do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Qui officia deserunt mollit anim id est laborum.</li>
<li>Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</li>
<li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</li>
</ul>
<p>Itaque earum rerum hic tenetur a sapiente delectus. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.</p>
<p>At vero eos et accusamus. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laboris nisi ut aliquip ex ea commodo consequat. Eaque ipsa quae ab illo inventore veritatis et quasi. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="rd10" name="rd">
<label class="tab-label" for="rd10">Do eiusmod tempor</label>
<div class="tab-content">
<h3>Lorem ipsum dolor sit amet?</h3>
<p>Donec ac diam accumsan, auctor urna non, lacinia eros. Duis faucibus metus magna, non condimentum massa accumsan at. Donec ut bibendum augue, vitae mollis purus. Ut tempus varius est ac fringilla. Mauris maximus justo eu lorem porttitor accumsan. Quisque quis pulvinar orci. Curabitur magna turpis, consectetur eu mi a, sollicitudin auctor lacus. Aliquam vitae urna eget libero luctus porta. Suspendisse potenti. Curabitur elementum vehicula blandit. Etiam aliquam finibus metus vitae faucibus. Nunc nec nulla in sapien luctus sodales eget eu elit. Nunc massa mauris, suscipit sit amet mi ornare, rhoncus auctor odio.</p>
<h3>Sed laoreet lacinia purus?</h3>
<p>Curabitur sagittis purus et arcu mollis, a volutpat augue tempus. Duis eros velit, tempus ut sem vitae, tristique hendrerit tortor. Aenean in feugiat leo. Sed bibendum egestas egestas. Phasellus quis nulla non est accumsan iaculis. Duis mollis viverra rhoncus. Nunc efficitur tempor nisl, eget aliquet enim blandit in. Donec mi eros, vehicula nec venenatis vitae, pretium bibendum velit. Integer non fermentum justo. Etiam risus elit, ultrices sed elit sed, pretium finibus ipsum. In condimentum libero nisl, vel rutrum nisl ornare nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eu elementum erat. Integer sit amet tortor in lectus congue feugiat.</p>
<h3>Praesent eu diam?</h3>
<p>Sed et ex sagittis, ullamcorper justo vel, consectetur massa. Fusce efficitur, odio sed aliquet interdum, erat libero mattis diam, id mollis metus augue vel sapien. Nulla facilisi. Maecenas at ultricies elit, eget sagittis turpis. Vestibulum sit amet ultrices lectus. Nullam nec arcu id est feugiat tempus. Mauris malesuada venenatis urna, congue consequat nunc lacinia sit amet. Praesent auctor egestas leo et varius. Quisque luctus libero ac mi ullamcorper malesuada. Nulla vestibulum ut quam id posuere. Ut tortor orci, pharetra efficitur ipsum in, molestie sodales justo. Praesent suscipit euismod porttitor.</p>
<h3>Donec mollis congue enim?</h3>
<p>Sed dapibus, quam at pharetra ultricies, risus est interdum urna, in facilisis dolor leo non justo. Duis in hendrerit eros, vel viverra nulla. Suspendisse ullamcorper leo id egestas vestibulum. Pellentesque sed nulla lacinia eros pharetra lacinia. Nulla semper turpis a erat convallis, et laoreet elit egestas. Suspendisse accumsan sollicitudin tortor, eget lacinia elit dapibus at. Vivamus id porttitor magna, nec porta enim. Phasellus accumsan feugiat eros, ut placerat mauris euismod sed. Maecenas quis massa a magna porta aliquet. Morbi lacinia erat sit amet tellus cursus sagittis. Proin fringilla ut lacus sit amet congue. Donec tincidunt nibh sit amet enim hendrerit, ac aliquet arcu varius.</p>
<h3>Integer tristique tincidunt velit et molestie?</h3>
<p>Quisque vitae dolor a felis aliquet condimentum. Curabitur eu lectus in lectus finibus porta. Curabitur convallis ligula nec lectus luctus, non molestie massa dignissim. Maecenas vel turpis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer leo mi, facilisis quis mollis eget, tincidunt vel mi. Proin cursus nibh et vehicula auctor.</p>
<h3>nteger dui nulla, laoreet in risus ut?</h3>
<p>Fusce nec mollis diam, quis interdum ligula. Etiam non hendrerit mauris. Nulla lacus leo, varius eu accumsan vel, sodales sit amet ex. Donec consequat imperdiet erat, in ullamcorper lorem consectetur ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ullamcorper orci purus, vel tincidunt elit laoreet at. Mauris ut orci ac est fermentum suscipit. Suspendisse efficitur turpis in sem vulputate hendrerit. Cras bibendum molestie est.</p>
<h3> Phasellus et ipsum ipsum?</h3>
<p>Quisque venenatis nibh felis, eget pulvinar enim faucibus ac. Sed id viverra massa. Nullam accumsan massa lacinia sodales interdum. Aliquam rutrum eleifend mauris, in tincidunt elit cursus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros orci. Maecenas blandit risus ut enim mollis viverra.</p>
<h3>Quisque at elementum sapien?</h3>
<p>Vestibulum finibus ac justo nec aliquam. Sed feugiat blandit turpis, ut iaculis mauris bibendum quis. Fusce vitae tortor quis justo pellentesque fermentum. Donec tincidunt ac leo sed tempus. Donec at lacinia purus. Donec sapien ipsum, imperdiet eu nibh non, dapibus mattis ex. Proin ac malesuada diam. Nam sollicitudin ligula at viverra egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum mattis ex ac dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed arcu eu nunc venenatis tincidunt.</p>
</div>
</div>最佳答案
事实证明，这个网站的构建方式有些奇怪。链接上有一个 anchor 标记，可以通过 Accordion 进入页面，并且由于尚不清楚的原因， anchor 是如何将自身附加到 Accordion 面板的。从将用户引导至此页面的链接中删除 anchor 也被证明是奇怪的。该链接位于站点的页脚中，并且它是页脚中唯一不加载页面顶部内容的链接。如果没有 anchor ， Accordion 页面加载时会看到页脚，而不是页面顶部。该链接的构建与页脚中的所有其他链接完全相同。在这一点上，我认为这是 Accordion 页面创建方式的 Drupal 问题。
关于html - iframe 内的 Accordion 跳转到父级的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58548098/