jQuery竖直手风琴下拉操作步骤代码



111 442 148



特效描述:jQuery竖直手风琴下拉操作步骤代码,jQuery步骤代码,竖直手风琴

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

3. HTML代码

	<section class="container">
		<div class="container">
			<ul class="payment-wizard">
		    	<li class="active">
		        	<div class="wizard-heading">
		            	1. 登录信息
		                <span class="icon-user"></span>
		            </div>
		            <div class="wizard-content">
		            	<p>根据您的要求创建您的登录表单。</p>
		            	<button class="btn-green done" type="submit">下一步</button>
		            </div>
		        </li>
		        <li>
		        	<div class="wizard-heading">
		            	2. 送货地址
		                <span class="icon-location"></span>
		            </div>
		            <div class="wizard-content">
			            <p>用户地址详细信息部分。</p>
		            	<button class="btn-green done" type="submit">下一步</button>
		            </div>
		        </li>
		        <li>
		        	<div class="wizard-heading">
		            	3. 订单汇总
		                <span class="icon-summary"></span>
		            </div>
		            <div class="wizard-content">
		            	<p>订单摘要详细信息部分。</p>
		            	<button class="btn-green done" type="submit">下一步</button>
		            </div>
		        </li>
		        <li>
		        	<div class="wizard-heading">
		            	4. 付款方法
		                <span class="icon-mode"></span>
		            </div>
		            <div class="wizard-content">
		            	<p>您的付款方法细节部分。</p>
		            	<button class="btn-green" type="submit">完成</button>
		            </div>
		        </li>
		    </ul>    
		</div>
	</section>
	<script type="text/javascript">
	$(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();
			}
		});
	})
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动星星打分 其他 滑动手风琴 步骤

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到