我发现了一个手风琴,原链接在这里
我的需求是:当我从手风琴的中部点击时,它应该自动滚动到顶部。目前它停留在点击处。 以下是代码:
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){
accordion.init({ speed: 300, oneOpen: true });
});
body {
font-size: 62.5%;
background: #dadada;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
background: #3F51B5;
color: white;
cursor: pointer;
font-size: .7em;
letter-spacing: .1em;
transition: all .3s;
text-transform: uppercase;
}
.accordion__item {
border-bottom: 1px solid #3a4ba4;
}
.accordion__item .accordion__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.accordion-header:hover {
background: #2D3D99;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #353535;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #2D3D99;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: #353535;
}
@media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
</div><!-- end of sub accordion -->
</div
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header">Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
</div><!-- end of sub accordion -->
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Panel 3</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
</div><!-- end of sub accordion -->
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Panel 4</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
</div><!-- end of sub accordion -->
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Panel 5</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
</div><!-- end of sub accordion -->
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Panel 6</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div>
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 1</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header">Sub Panel 2</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
</div><!-- end of sub accordion item body contents -->
</div><!-- end of sub accordion item body -->
</div><!-- end of sub accordion item -->
</div><!-- end of sub accordion -->
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
</div><!-- end of accordion -->
所以,当用户点击手风琴时,它应该自动向上移动。有人可以帮忙吗?我尝试了一些脚本,但似乎没有起作用。