问题描述
我有这些可以打开和关闭的手风琴。我还希望手风琴在点击时滚动到页面顶部。
HTML:
<button class="accordion"><h2>Title</h></button>
<div class="panel">
<p>some text</p>
</div>
用于打开和关闭手风琴的 Javascript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",function() {
/* Toggle between adding and removing the "active" class,to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
我尝试添加 Javascript 以使其滚动到顶部,但它不起作用:
$('button').click(function() {
$(this).animate({
scrollTop:0
},1000);
});
解决方法
所以,我认为你可以改变你的方法。
考虑到您使用的是 jQuery,您的 HTML 可以是这样的:
...
<div class="accordion">
<div class="accordion-header">Your accordion header</div>
<div class="accordion-content">Your Accordion Content</div>
</div>
...
你的 Javascript 像这样:
function scrollToElement($el,time = 500){
$([document.documentElement,document.body]).animate({
scrollTop: $el.offset().top
},time);
}
function setupAccordion(){
$('.accordion .accordion-header').click(function(){
let $parent = $(this).parent();
$parent.toggleClass('active');
scrollToElement($parent);
});
}
$(document).ready(function(){
setupAccordion();
});
你的 CSS 是这样的:
.accordion-header{
border-bottom:1px solid #ccc;
padding:1em;
cursor:pointer;
font-weight:bold;
}
.accordion-content{
max-height:0;
opacity:0;
visibility:hidden;
transition:all 0.2s ease;
padding:0;
}
.accordion.active .accordion-content{
max-height:500px;
visibility:visible;
opacity:1;
padding:1em;
}