利用Load載入資料應用

三、左側加入箭號

 Step1:新增箭號CSS設定

/*箭號加入=========*/
.arrow-right{
	display: inline-block;
	margin-right: 10px;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid #000264;
	width: 0px;
	height: 0px;
	padding-left: 10px;
}
.arrow-down{
	display: inline-block;
	margin-right: 10px;
	border-top:10px solid #000264;
	border-right:10px solid transparent;
	border-left:10px solid transparent;
	width: 0px;
	height: 0px;
}

 

 Step2:jQuery加入箭號

//加箭號
	$('#blockleft>ul>li:has(ul)').prepend('<span class="arrow-down"></span>');
	$('#blockleft>ul>li:not(:has(ul))').css('padding-left',30);

 Step3:展開摺疊後,箭號改變

 

//頁面啟動頁面顯示
	$('#pageload').load('page/chap1.html');
	
	
 
//依 左側 【data-file】載入 頁面內容 至右側
	$('#blockleft li li').click(function(){
		var $page = $(this).data('file');
	//	console.log($page);
		$('#pageload').load('page/'+$page+'.html');
		$('#blockleft li li').removeClass('active');
		$(this).addClass('active');
});

//加箭號
	$('#blockleft>ul>li:has(ul)').prepend('<span class="arrow-down"></span>');
	$('#blockleft>ul>li:not(:has(ul))').css('padding-left',30);


//章節點選,展開及摺疊
var $pageIO=0;

	//預設展開
		$('#blockleft>ul>li').eq($pageIO).children('h3').addClass('active').next().slideDown();
		$('#blockleft>ul>li').eq($pageIO).children('span').removeClass('arrow-down').addClass('arrow-right');
	
$('#blockleft h3').click(function(){
 
	var $thisPageIndex = $(this).parent().index();
//		alert($thisPageIndex);
 
	if($pageIO != $thisPageIndex){
		$('#blockleft ul li ul').slideUp();
		$(this).next().slideDown();
		$pageIO = $thisPageIndex;
		
		//節次摺疊後,向右箭號改為向下
		$('#blockleft span').removeClass('arrow-right').addClass('arrow-down');
	}
 
	$('#pageload').load('page/'+$(this).parent().data('file')+'.html');
	
	//節次展開後,向下箭號改為向右,並加入【.active】顯示特別色彩
	$(this).prev().removeClass('arrow-down').addClass('arrow-right');
	$('#blockleft h3').add('#blockleft li li').removeClass('active');
	$(this).addClass('active');
 
});