1. 개발자도구 평소상태
2. 개발자도구 a.cate 클릭한 상태
카페24 쇼핑몰을 테스트계정에서 만져보고 있는데 도저히 제 손에서는 해결책이 안나와 부득이하게 질문드려봅니다. 개발자도구에서도 하위메뉴는 보이지 않다가 상위메뉴를 클릭해야만이 하위메뉴가 생기는데, 클릭을 하지 않아도 상시로 보이게 원합니다.
3시간동안 구조 파악하면서 해결하려 시도해봐도.. 지치네요.. 아시는분 계실까요.
1) HTML
Copy
<div id="slideCateList" class="navigation-menu__category">
<ul module="layout_category" class="categoryList">
<li id="cate{$cate_no}" class="menu">
<a href="{$link_product_list}" class="view">{$name|cut 25}</a>
<a href="#none" class="cate" cate="{$param}">상품보기</a>
</li>
<li id="cate{$cate_no}" class="menu">
<a href="{$link_product_list}" class="view">{$name|cut 25}</a>
<a href="#none" class="cate" cate="{$param}">상품보기</a>
</li>
</ul>
</div>
2) JS
Copy
var aCategory = [];
$(function(){
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();
}
});
},
getParam: function(sUrl, sKey) {
if (typeof sUrl !== 'string') return;
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.html'+this.param;
} else {
aHtml.push('<li id="cate'+this.cate_no+'">');
var sHref = '#none';
}
aHtml.push('<a href="/product/list.html'+this.param+'" class="view" cate="'+this.param+'" data-i18n="LIST.PRD_CATE_NO_'+this.cate_no+'" data-i18n-new>'+this.name+'</a>');
if (methods.aSubCategory[sNextParentNo] != undefined) aHtml.push('<a href="'+sHref+'"'+this.param+'" onclick="subMenuEvent(this);" class="cate">상품보기</a>');
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.html'+this.param;
} else {
aHtml.push('<li id="cate'+this.cate_no+'">');
var sHref = '#none';
}
aHtml.push('<a href="/product/list.html'+this.param+'" class="view" cate="'+this.param+'" data-i18n="LIST.PRD_CATE_NO_'+this.cate_no+'" data-i18n-new>'+this.name+'</a>');
if (methods.aSubCategory[sNextParentNo] != undefined) aHtml.push('<a href="'+sHref+'"'+this.param+'" onclick="subMenuEvent(this);" class="cate">상품보기</a>');
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.html'+this.param+'" class="view" cate="'+this.param+'" onclick="subMenuEvent(this);" data-i18n="LIST.PRD_CATE_NO_'+this.cate_no+'" data-i18n-new>'+this.name+'</a>');
aHtml.push('</li>');
});
aHtml.push('</ul>');
}
aHtml.push('</li>');
});
aHtml.push('</ul>');
}
aHtml.push('</li>');
});
aHtml.push('</ul>');
}
$(oParentNode).append(aHtml.join(''));
if (window.i18nextCafe24) {
i18nextCafe24.translate('data-i18n-new');
}
},
close: function() {
$('.slideSubMenu').remove();
},
checkSub: function() {
$('.cate').each(function(){
var sParam = $(this).attr('cate');
if (!sParam) return;
var iCateNo = Number(methods.getParam(sParam, 'cate_no'));
var result = methods.aSubCategory[iCateNo];
if (result == undefined) {
if ($(this).closest('#slideProjectList').length) {
var sHref = '/product/project.html'+sParam;
} else {
var sHref = '/product/list.html'+sParam;
}
$(this).attr('href', sHref);
$(this).parent().attr('class', 'noChild');
}
});
}
};
methods.get();
$('#slideCateList li > a.cate').on('click', function(e) {
var sParam = $(this).attr('cate');
if (!sParam) return;
var iCateNo = Number(methods.getParam(sParam, 'cate_no'));
var hasClass = $(this).parent().hasClass('selected');
//if ($(this).parent().attr('class') == 'xans-record- selected') {
if(hasClass) {
methods.close();
} else {
if (!iCateNo) return;
$('#aside #slideCateList li').removeClass('selected');
methods.close();
methods.show(this.parentNode, iCateNo);
}
});
/* 모바일 슬라이드바 카테고리 중분류체크 */
jQuery('#slide_add_category li').each(function(){
if( jQuery(this).children('ul').length == 0 ){
jQuery(this).addClass('noChild');
} else {
jQuery(this).append('<a href="#none" class="cate">상품보기</a>');
}
});
/* 모바일 슬라이드바 카테고리 */
$('#aside ul a.cate').on('click', function(e){
$(this).parent().find('li').removeClass('selected');
$('#slideCateList .categoryList li').removeClass('selected');
$(this).parent().toggleClass('selected');
if (!$(this).parent('li').hasClass('noChild')){
e.preventDefault();
}
});
/* 모바일 슬라이드바 고객센터 토글 */
jQuery('#aside .side_title span').click(function(){
jQuery('.community_tab .board ul').toggle();
jQuery('#aside .side_title span').toggleClass('open');
});
$('#slideCateList h2').on('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();
}
$(this).toggleClass('selected');
});
$('#slideProjectList .icoCategory').on('click', function() {
var target = $(this).parents('#slideProjectList');
if(target.find('.categoryList').css("display") == "none"){
target.find('.categoryList').show();
}else{
target.find('.categoryList').hide();
}
$(this).parents('.title').toggleClass('selected');
});
});
function subMenuEvent(obj) {
$(obj).parent().find('li').removeClass('selected');
$(obj).parent().toggleClass('selected');
}
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;
}답변 1개 / 댓글 2개
채택된 답변
+20 포인트
비버팩토리오메나... 스크립트로 해놔서 그런것같은데... php로한다면 key로 일부만 보임처리 할수있구요
클래스 active로 줘서 한개만 보여주게 하면될것같은데요
굳이 저렇게 ajax 이용해서 뿌려주고 할필요는 없는데... 이유를 모르겠네요
답변에 대한 댓글 2개
myfree
2년 전
2년 전
var sCateSelected = (checkInArray(sMyCateList, this.cate_no) == true) ? ' selected' : '';
이부분 이랑 값 뭘로 나온지 봐야되고 일치한다면 key 값에서 첫번째꺼 1을 이용해서 하면될것같아요
이부분 이랑 값 뭘로 나온지 봐야되고 일치한다면 key 값에서 첫번째꺼 1을 이용해서 하면될것같아요
답변을 작성하려면 로그인이 필요합니다.
도무지 모르겠어요 ㅜ