小贝子编程

如何使Accordion滑动下一步



我正在尝试运行这个Accordion，这样当你填写输入并单击按钮关闭上一步并进入下一步时。。。以及单击上一个按钮以关闭活动步骤并转到上一个步骤。

我试图以某种方式将其组合在一起，但点击后没有任何动作

提前感谢您的帮助。

var accordion = (function() {
var $accordion = $('.loanForm-js');
var $accordion_header = $accordion.find('.loanForm-header-js');
var $accordion_item = $('.loanForm-item-js');
// 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 && $('.loanForm-item-js.active').length > 1) {
$('.loanForm-item-js.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.loanForm-item-js.active').find('> .loanForm-body-js').show();
},
toggle: function($this) {
if (settings.oneOpen && $this[0] != $this.closest('.loanForm-js').find('> .loanForm-item-js.active > .loanForm-header-js')[0]) {
$this.closest('.loanForm-js')
.find('> .loanForm-item-js')
.removeClass('active')
.find('.loanForm-body-js')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.loanForm-item-js').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function() {
accordion.init({
speed: 300,
oneOpen: true
});
});
.loanForm-wrapper {
width: 100%;
position: relative;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.loanForm-form-content {
width: 70%;
position: relative;
}
.loanForm-details-content {
width: 30%;
position: relative;
}
.loanForm-position-absolute {
position: absolute;
top: 0;
left: 0;
}
.loanForm-position-fixed {
width: 330px;
position: fixed;
padding: 0;
display: flex;
z-index: 100;
flex-direction: column;
}
.loanForm-details-box {
width: 100%;
padding: 10px;
margin: 0;
background: orange;
}
.loanForm-details-info {
padding: 7px 10px;
display: flex;
justify-content: space-between;
}
.loanForm {
font-size: 16px;
width: 100%;
}
.loanForm-header,
.loanForm-body {
background: white;
}
.loanForm-header {
padding: 1.5em 1.5em;
background: #fdd365;
color: #353353;
/*cursor: pointer;*/
font-size: .7em;
letter-spacing: .1em;
transition: all .3s;
text-transform: uppercase;
}
.loanForm-item .loanForm-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/*.loanForm-item.active .loanForm-header:hover {
background: #2D3D99;
position: relative;
z-index: 5;
cursor: pointer;
}
.loanForm-header:hover {
background: #2D3D99;
position: relative;
z-index: 5;
}
*/
.loanForm-body {
background: #F9F9FF;
color: #353353;
display: none;
}
.loanForm-form {
padding: 1.5em 1.5em;
font-size: .85em;
}
.loanForm-item.active:last-child .loanForm-header {
border-radius: none;
}
.loanForm:first-child>.loanForm-item>.loanForm-header {
border-bottom: 1px solid transparent;
}
.icon::after {
display: none;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.loanForm-item>.loanForm-header::after {
content: "f078";
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
transform: rotate(0deg);
transition: .3s all;
position: relative;
top: -2px;
}
.fa-f077,
.fa-f078 {
float: right;
}
/*
chevron up: f077;
chevron down: f078;
*/
.loanForm-item.active>.loanForm-header::after {
content: "f077";
font-family: "Font Awesome 5 Free";
transform: rotate(-180deg);
}
.loanForm-item.active .loanForm-header {
background: #FF4C60;
color: #F9F9FF;
}
.loanForm-item.activated .loanForm-header {
background: #9de3d0;
color: #353353;
}
.loanForm-item {
border-bottom: 1px solid #dabd44;
}
.loanForm-item.active {
border-bottom: 1px solid transparent;
}
.loanForm-item.activated {
border-bottom: 1px solid #85c9b6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
<div class="loanForm loanForm-js">
<div class="loanForm-item loanForm-item-js active">
<div class="icon loanForm-header loanForm-header-js">Create Account</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group col-md-6">
<label for="confirm-password">Confirm password</label>
<input type="password" class="form-control">
</div>
</div>
<div class="form-group text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Personal information</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Adress</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Employment and income</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Documents and Consents</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Summarization</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-send btn btn-default">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

给你。。您需要包含next和prev按钮点击的两个功能，并需要使用查找最近的下一个和上一个元素

对于类别为loanForm-item-js的下一个元素

$(this).closest('.loanForm-item-js').nextAll('.loanForm-item-js:first')

对于类别为loanForm-item-js的前一个元素

$(this).closest('.loanForm-item-js').prevAll('.loanForm-item-js:first')

添加了两个功能，分别用于下一次和上一次点击，如

$('.loanForm-next').on('click', function() { ... })
$('.loanForm-prev').on('click', function() { ... })

工作片段如下，

var accordion = (function() {
var $accordion = $('.loanForm-js');
var $accordion_header = $accordion.find('.loanForm-header-js');
var $accordion_item = $('.loanForm-item-js');
// 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));
});

$('.loanForm-next').on('click', function() {
// accordion.toggle($(this));
$(this).closest('.loanForm-js')
.find('> .loanForm-item-js')
.removeClass('active')
.find('.loanForm-body-js')
.slideUp()
$(this).closest('.loanForm-item-js').nextAll('.loanForm-item-js:first').toggleClass('active')
console.log();
$(this).closest('.loanForm-item-js').nextAll('.loanForm-item-js:first').find('.loanForm-body-js').stop().slideToggle(settings.speed);
});

$('.loanForm-prev').on('click', function() {
// accordion.toggle($(this));
$(this).closest('.loanForm-js')
.find('> .loanForm-item-js')
.removeClass('active')
.find('.loanForm-body-js')
.slideUp()
$(this).closest('.loanForm-item-js').prevAll('.loanForm-item-js:first').toggleClass('active')
$(this).closest('.loanForm-item-js').prevAll('.loanForm-item-js:first').find('.loanForm-body-js').stop().slideToggle(settings.speed);
});

$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if (settings.oneOpen && $('.loanForm-item-js.active').length > 1) {
$('.loanForm-item-js.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.loanForm-item-js.active').find('> .loanForm-body-js').show();
},
toggle: function($this) {
if (settings.oneOpen && $this[0] != $this.closest('.loanForm-js').find('> .loanForm-item-js.active > .loanForm-header-js')[0]) {
$this.closest('.loanForm-js')
.find('> .loanForm-item-js')
.removeClass('active')
.find('.loanForm-body-js')
.slideUp()
}
$this.closest('.loanForm-item-js').toggleClass('active');
console.log($this.next());
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function() {
accordion.init({
speed: 300,
oneOpen: true
});
});
.loanForm-wrapper {
width: 100%;
position: relative;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.loanForm-form-content {
width: 70%;
position: relative;
}
.loanForm-details-content {
width: 30%;
position: relative;
}
.loanForm-position-absolute {
position: absolute;
top: 0;
left: 0;
}
.loanForm-position-fixed {
width: 330px;
position: fixed;
padding: 0;
display: flex;
z-index: 100;
flex-direction: column;
}
.loanForm-details-box {
width: 100%;
padding: 10px;
margin: 0;
background: orange;
}
.loanForm-details-info {
padding: 7px 10px;
display: flex;
justify-content: space-between;
}
.loanForm {
font-size: 16px;
width: 100%;
}
.loanForm-header,
.loanForm-body {
background: white;
}
.loanForm-header {
padding: 1.5em 1.5em;
background: #fdd365;
color: #353353;
/*cursor: pointer;*/
font-size: .7em;
letter-spacing: .1em;
transition: all .3s;
text-transform: uppercase;
}
.loanForm-item .loanForm-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/*.loanForm-item.active .loanForm-header:hover {
background: #2D3D99;
position: relative;
z-index: 5;
cursor: pointer;
}
.loanForm-header:hover {
background: #2D3D99;
position: relative;
z-index: 5;
}
*/
.loanForm-body {
background: #F9F9FF;
color: #353353;
display: none;
}
.loanForm-form {
padding: 1.5em 1.5em;
font-size: .85em;
}
.loanForm-item.active:last-child .loanForm-header {
border-radius: none;
}
.loanForm:first-child>.loanForm-item>.loanForm-header {
border-bottom: 1px solid transparent;
}
.icon::after {
display: none;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.loanForm-item>.loanForm-header::after {
content: "f078";
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
transform: rotate(0deg);
transition: .3s all;
position: relative;
top: -2px;
}
.fa-f077,
.fa-f078 {
float: right;
}
/*
chevron up: f077;
chevron down: f078;
*/
.loanForm-item.active>.loanForm-header::after {
content: "f077";
font-family: "Font Awesome 5 Free";
transform: rotate(-180deg);
}
.loanForm-item.active .loanForm-header {
background: #FF4C60;
color: #F9F9FF;
}
.loanForm-item.activated .loanForm-header {
background: #9de3d0;
color: #353353;
}
.loanForm-item {
border-bottom: 1px solid #dabd44;
}
.loanForm-item.active {
border-bottom: 1px solid transparent;
}
.loanForm-item.activated {
border-bottom: 1px solid #85c9b6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
<div class="loanForm loanForm-js">
<div class="loanForm-item loanForm-item-js active">
<div class="icon loanForm-header loanForm-header-js">Create Account</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group col-md-6">
<label for="confirm-password">Confirm password</label>
<input type="password" class="form-control">
</div>
</div>
<div class="form-group text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Personal information</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Adress</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Employment and income</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Documents and Consents</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-next btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="loanForm-item loanForm-item-js">
<div class="icon loanForm-header loanForm-header-js">Summarization</div>
<div class="loanForm-body loanForm-body-js">
<div class="loanForm-form">
FORM INPUT HERE
<div class="form-row">
<div class="form-group col-md-6 text-left">
<button type="button" class="loanForm-prev btn btn-default">Prev</button>
</div>
<div class="form-group col-md-6 text-right">
<button type="button" class="loanForm-send btn btn-default">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

在此处使用代码笔

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium