jQuery豎直手風琴下拉操作步驟代碼



119 473 158



特效描述: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

加群請備注:從官網了解到

老夫子电子