[jQuery] data값을 이용한 hover 메뉴

클릭시 메뉴박스가 펼쳐지고

리스트 mouseenter 시 그에맞는 depth가 나오고, 영역밖으로 나갔을때 마지막 hover는 유지되며 메뉴박스는 사라지는 구조이다.

	

		
	
	

		

			
01
			
02
			
03
			...
			
09
		
	
	

		내용이네용
	
	

		내용이네용
	
	

		내용이네용
	
	...
 	

		내용이네용
	

	$(".cate-btn").on('click','button', function(){
		if($(this).hasClass('on')) $('.cate-btn, .category-box').removeClass('on');
		else $('.cate-btn, .category-box').addClass('on');
		return false;
	});

	$(document).on('mouseleave', '.category-box', function(){
		if($(this).hasClass('on')) $('.category-box').removeClass('on');
		return false;
	});

   $(document).on('mouseenter', '.category-box .cate-ul > li', function(){
		if(!$(this).hasClass('on')){
			var categoryCode = $(this).data('catecode');
			categoryCode = categoryCode < 10 ? "0"+categoryCode.toString() : categoryCode.toString(); 
			$('.category-box .cate-ul > li').removeClass('on');
			$(this).addClass('on');
			$('.category-box .depth-box').removeClass('on');
			$('.category-box .depth-box[data-catecode="'+ categoryCode +'"]').addClass('on');
			console.log(categoryCode);
		}
	});