펼쳐지는 메뉴 관련 질문입니다.
본문
[code]
/**
* 모바일쇼핑몰 슬라이딩메뉴 */
var aCategory = [];
$(document).ready(function(){
$('#header').append('<div id="dimmedSlider"></div>');
var methods = {
aCategory : [],
aSubCategory : {},
get: function()
{
$.ajax({
url : '/exec/front/Product/SubCategory',
dataType: 'json',
success: function(aData) {
if (aData == null || aData == 'undefined') {
methods.checkSub();
return;
}
for (var i=0; i<aData.length; i++)
{
var sParentCateNo = aData[i].parent_cate_no;
var sCateNo = aData[i].cate_no;
if (!methods.aSubCategory[sParentCateNo]) {
methods.aSubCategory[sParentCateNo] = [];
}
if (!aCategory[sCateNo]) {
aCategory[sCateNo] = [];
}
methods.aSubCategory[sParentCateNo].push( aData[i] );
aCategory[sCateNo] = aData[i];
}
methods.checkSub();
methods.getMyCateList();
}
});
},
getParam: function(sUrl, sKey) {
var aUrl = sUrl.split('?');
var sQueryString = aUrl[1];
var aParam = {};
if (sQueryString) {
var aFields = sQueryString.split("&");
var aField = [];
for (var i=0; i<aFields.length; i++) {
aField = aFields[i].split('=');
aParam[aField[0]] = aField[1];
}
}
return sKey ? aParam[sKey] : aParam;
},
show: function(overNode, iCateNo) {
var oParentNode = overNode;
var aHtml = [];
var sMyCateList = localStorage.getItem("myCateList");
if (methods.aSubCategory[iCateNo] != undefined) {
aHtml.push('<ul class="slideSubMenu">');
$(methods.aSubCategory[iCateNo]).each(function() {
var sNextParentNo = this.cate_no;
var sCateSelected = (checkInArray(sMyCateList, this.cate_no) == true) ? ' selected' : '';
if (methods.aSubCategory[sNextParentNo] == undefined) {
aHtml.push('<li class="noChild" id="cate'+this.cate_no+'">');
var sHref = '/product/list_thumb.html'+this.param;
} else {
aHtml.push('<li id="cate'+this.cate_no+'">');
var sHref = '#none';
}
aHtml.push('<a href="'+sHref+'" class="cate" cate="'+this.param+'" onclick="subMenuEvent(this);">'+this.name+'</a>');
if (methods.aSubCategory[sNextParentNo] != undefined) aHtml.push('<a href="/product/list_thumb.html'+this.param+'" class="view"><span>ALL VIEW</span></a>'); // 190605 수정
aHtml.push('<button type="button" class="icoBookmark'+sCateSelected+'" id="icoBookmark">즐겨찾기 추가</button>');
if (methods.aSubCategory[sNextParentNo] != undefined) {
aHtml.push('<ul>');
$(methods.aSubCategory[sNextParentNo]).each(function() {
var sNextParentNo2 = this.cate_no;
var sCateSelected = (checkInArray(sMyCateList, this.cate_no) == true) ? ' selected' : '';
if (methods.aSubCategory[sNextParentNo2] == undefined) {
aHtml.push('<li class="noChild" id="cate'+this.cate_no+'">');
var sHref = '/product/list_thumb.html'+this.param;
} else {
aHtml.push('<li id="cate'+this.cate_no+'">');
var sHref = '#none';
}
aHtml.push('<a href="'+sHref+'" class="cate" cate="'+this.param+'" onclick="subMenuEvent(this);">'+this.name+'</a>');
if (methods.aSubCategory[sNextParentNo] != undefined) aHtml.push('<a href="/product/list_thumb.html'+this.param+'" class="view"><span>ALL VIEW</span></a>'); // 190605 수정
aHtml.push('<button type="button" class="icoBookmark'+sCateSelected+'" id="icoBookmark">즐겨찾기 추가</button>');
if (methods.aSubCategory[sNextParentNo2] != undefined) {
aHtml.push('<ul>');
$(methods.aSubCategory[sNextParentNo2]).each(function() {
aHtml.push('<li class="noChild" id="cate'+this.cate_no+'">');
var sCateSelected = (checkInArray(sMyCateList, this.cate_no) == true) ? ' selected' : '';
aHtml.push('<a href="/product/list_thumb.html'+this.param+'" class="cate" cate="'+this.param+'" onclick="subMenuEvent(this);">'+this.name+'</a>');
aHtml.push('<button type="button" class="icoBookmark'+sCateSelected+'" id="icoBookmark">즐겨찾기 추가</button>');
aHtml.push('</li>');
});
aHtml.push('</ul>');
}
aHtml.push('</li>');
});
aHtml.push('</ul>');
}
aHtml.push('</li>');
});
aHtml.push('</ul>');
}
$(oParentNode).append(aHtml.join(''));
},
close: function() {
$('.slideSubMenu').remove();
},
checkSub: function() {
$('.cate').each(function(){
var iCateNo = Number(methods.getParam($(this).attr('cate'), 'cate_no'));
var result = methods.aSubCategory[iCateNo];
if (result == undefined) {
if ($(this).closest('#slideProjectList').length) {
var sHref = '/product/project.html'+$(this).attr('cate');
} else {
var sHref = '/product/list_thumb.html'+$(this).attr('cate');
}
$(this).attr('href', sHref);
$(this).parent().attr('class', 'noChild');
}
});
},
getMyCateList :function() {
var sMyCateList = localStorage.getItem("myCateList");
if (sMyCateList != null && sMyCateList != "") {
var aTempList = sMyCateList.split("|");
var aHtml = [];
for (var i = 0; i < aTempList.length; i++) {
if (aTempList[i] != "") {
var iCateNo = aTempList[i];
var sCateName = aCategory[iCateNo].name;
var sCateParam = aCategory[iCateNo].param;
aHtml.push('<li id="bookmark'+iCateNo+'"><a href="/product/list_thumb.html'+sCateParam+'" book_mark="'+iCateNo+'">'+sCateName+'</a><button type="button" class="icoBookmark selected" onclick="setMyCateList('+iCateNo+');">즐겨찾기 삭제</button></li>');
$("#cate"+iCateNo+" #icoBookmark").addClass("selected");
}
}
$('#bookmartCateArea').append('<ul>'+aHtml.join('')+'</ul>');
}
chkMyCateList();
}
};
var offCover = {
init : function() {
$(function() {
$('#wrap').append('<a href="#container" id="btnFoldLayout">메뉴 토글</a>');
offCover.resize();
$(window).resize(function(){
offCover.resize();
});
});
},
layout : function(){
if ($('html').hasClass('expand')) {
$('#btnFoldLayout').show();
$('#aside').css({'visibility':'visible', 'display':'block'});
$('html, body').css({"overflow-x":""})
setTimeout(function(){
$('#btnFoldLayout').css({'background':'rgba(0,0,0,0.7)'});
$('#aside').css({'z-index':200});
}, 350);
} else {
$('#btnFoldLayout').hide();
$('#aside').css({'z-index':0});
setTimeout(function(){
$('#aside').css({'visibility':'', 'display':'none'});
}, 300);
}
$('#aside').css({'visibility':'visible'});
},
resize : function(){
var height = $('body').height();
$('#container').css({'min-height':height});
}
};
methods.get();
offCover.init();
$('#header .fold, #aside .btnClose').click(function(e){
$('#dimmedSlider').toggle();
$('html').toggleClass('expand');
offCover.layout(); console.log("AAA");
e.preventDefault();
});
$('#btnFoldLayout').click(function(e){
$('#header .fold').trigger('click');
e.preventDefault();
});
$('#slideCateList li > a.cate').click(function(e) {
var iCateNo = Number(methods.getParam($(this).attr('cate'), 'cate_no'));
if ($(this).parent().attr('class') == 'xans-record- selected') {
methods.close();
} else {
if (!iCateNo) return;
$('#aside #slideCateList li').removeClass('selected');
methods.close();
methods.show(this.parentNode, iCateNo);
}
});
$('#aside ul a.cate').click(function(e){
$(this).parent().find('li').removeClass('selected');
$(this).parent().toggleClass('selected');
if (!$(this).parent('li').hasClass('noChild')){
e.preventDefault();
}
});
$("#icoBookmark").live('click', function() {
var iCateNo = Number(methods.getParam($(this).parent().find('a').attr('cate'), 'cate_no'));
setMyCateList(iCateNo, $(this));
});
$('#slideCateList h2').click(function() {
var oParentId = $(this).parent().attr('id');
if (oParentId == 'slideCateList' || oParentId == 'slideMultishopList' || oParentId == 'slideProjectList') {
($(this).attr('class') == 'selected') ? $(this).next().hide() : $(this).next().show();
} else if (oParentId == 'bookmarkCategory') {
if ($(this).attr('class') == 'selected') {
$(this).parent().find('#bookmarkEmpty').hide();
$(this).parent().find('#bookmartCateArea').hide();
} else {
chkMyCateList();
$(this).parent().find('#bookmartCateArea').show();
}
}
$(this).toggleClass('selected');
});
});
function subMenuEvent(obj) {
$(obj).parent().find('li').removeClass('selected');
$(obj).parent().toggleClass('selected');
}
function setMyCateList(iCateNo, oObj) {
$(oObj).toggleClass('selected');
var sMyCateList = localStorage.getItem("myCateList");
var aCateList = [];
if (checkInArray(sMyCateList, iCateNo) == true) {
var aTemp = sMyCateList.split("|");
for (var i = 0 ; i < aTemp.length ; i++) {
if (aTemp[i] != iCateNo) {
aCateList.push(aTemp[i]);
}
}
var sCateList = aCateList.join('|');
localStorage.setItem("myCateList" , sCateList);
$('#bookmartCateArea #bookmark'+iCateNo).remove();
if (aCateList.length == 0) {
$('#bookmarkCategory #bookmartCateArea').find('ul').remove();
}
$("#cate"+iCateNo+" > #icoBookmark").removeClass("selected");
} else {
var sCateName = aCategory[iCateNo].name;
var sCateParam = aCategory[iCateNo].param;
var sHtml = '';
if (sMyCateList == null || sMyCateList == '') {
sHtml = '<ul><li id="bookmark'+iCateNo+'"><a href="/product/list_thumb.html'+sCateParam+'" book_mark="'+iCateNo+'">'+sCateName+'</a><button type="button" class="icoBookmark selected" onclick="setMyCateList('+iCateNo+');">즐겨찾기 삭제</button></li></ul>'
$('#bookmarkCategory #bookmartCateArea').append(sHtml);
} else {
sHtml = '<li id="bookmark'+iCateNo+'"><a href="/product/list_thumb.html'+sCateParam+'" book_mark="'+iCateNo+'">'+sCateName+'</a><button type="button" class="icoBookmark selected" onclick="setMyCateList('+iCateNo+');">즐겨찾기 삭제</button></li>'
$('#bookmarkCategory #bookmartCateArea ul').append(sHtml);
}
$(this).addClass('selected');
if (sMyCateList == null || sMyCateList == '') {
localStorage.setItem('myCateList' , iCateNo);
} else {
localStorage.setItem('myCateList' , sMyCateList + '|' + iCateNo);
}
}
chkMyCateList();
}
function checkInArray(sBookmarkList, iCateNo) {
if (sBookmarkList == null) return false;
var aBookmarkList = sBookmarkList.split("|");
for (var i = 0; i < aBookmarkList.length; i++) {
if (aBookmarkList[i] == iCateNo) {
return true;
}
}
return false;
}
function chkMyCateList() {
var sMyCateList = localStorage.getItem("myCateList");
if (sMyCateList == null || sMyCateList == '') {
$('#bookmarkEmpty').show();
} else {
$('#bookmarkEmpty').hide();
}
}
[/code/
회원님들 안녕하십니까!
모바일 쇼핑몰에서 위 그림같은 메뉴를 사용중인데요.
처음부터 펼쳐지지 않고 닫혀있다가 shop을 클릭했을때 펼쳐지게 하고 싶은데 공부가 모자라 아직 해결을 못하고 있습니다. js 파일 소스 업로드합니다. 바쁜 시간중에 도움 주시면 대단히 감사하겠습니다.
답변 3
귀한 시간 답변 주셔서 감사합니다.
열심히 공부하겠습니다.
너무 길고 장황하게 작업하시네요 ㅠㅠ
쿼리로 목록 뿌려놓고 접었다 폈다로 충분하지 싶은데..
해당 div 를 jquery 를 활용하여 show () , hide() 로 중분 할거 같습니다.
