jQuery和CSS3手风琴样式分步向导特效

使用方法

HTML结构

该用户向导的HTML结构使用无序列表的HTML结构，每一个手风琴项是一个li元素。

<div class="container">
   <ul class="payment-wizard">
       <li class="active">
         <div class="wizard-heading">
             1. Login Information
               <span class="icon-user"></span>
           </div>
           <div class="wizard-content">
             <p>Create your Login Form here as per your requirement.</p>
             <button class="btn-green done" type="submit">Continue</button>
           </div>
       </li>
       ......
     </ul>
 </div>
 

CSS样式

该用户向导的CSS样式比较简单，其中每个手风琴项都带有一些好看的阴影效果。

.wizard-content{
   display: none; 
   float: left; 
   width: 100%; 
   background-color: #fff; 
   box-shadow: 0 8px 8px #d2d2d2; 
   padding: 15px; 
   box-sizing: border-box;
 }
 

另外按钮被制作为3D效果，这主要通过:before伪元素来制作按钮的底部阴影效果，用于模拟立体的感觉。

.btn-green{
   color: #fff; 
   float: right; 
   border: 0; 
   padding: 7px 10px; 
   min-width: 92px; 
   z-index: 1; 
   cursor: pointer; 
   font-size: 14px; 
   text-transform: uppercase; 
   background-color: #5fba57; 
   border-radius: 3px; 
   border-bottom: 3px solid #289422; 
   position: relative; 
   transition: 0.3s;
 }
 .btn-green:before{
   content: ""; 
   width: 100%; 
   height: 0; 
   border-radius: 3px; 
   z-index: -1; 
   position: absolute; 
   left: 0; 
   bottom: 0; 
   background-color: #289422; 
   transition: 0.3s;
 }
 .btn-green:hover:before{height: 100%;}
 

JavaScript

该用户向导插件使用jQuery代码来完成相应元素的class类的添加和移除，以及手风琴项的展开和收缩动画。

$(window).load(function(){  
   $(".done").click(function(){
     var this_li_ind = $(this).parent().parent("li").index();
     if($('.payment-wizard li').hasClass("jump-here")){
       $(this).parent().parent("li").removeClass("active").addClass("completed");
       $(this).parent(".wizard-content").slideUp();
       $('.payment-wizard li.jump-here').removeClass("jump-here");
     }else{
       $(this).parent().parent("li").removeClass("active").addClass("completed");
       $(this).parent(".wizard-content").slideUp();
       $(this).parent().parent("li").next("li:not('.completed')")
             .addClass('active').children('.wizard-content').slideDown();
     }
   });
     
   $('.payment-wizard li .wizard-heading').click(function(){
     if($(this).parent().hasClass('completed')){
       var this_li_ind = $(this).parent("li").index();   
       var li_ind = $('.payment-wizard li.active').index();
       if(this_li_ind < li_ind){
         $('.payment-wizard li.active').addClass("jump-here");
       }
       $(this).parent().addClass('active').removeClass('completed');
       $(this).siblings('.wizard-content').slideDown();
     }
   });
 })