카페24.. 하위메뉴 상시 보이게 원합니다.
본문
1. 개발자도구 평소상태
2. 개발자도구 a.cate 클릭한 상태
카페24 쇼핑몰을 테스트계정에서 만져보고 있는데 도저히 제 손에서는 해결책이 안나와 부득이하게 질문드려봅니다. 개발자도구에서도 하위메뉴는 보이지 않다가 상위메뉴를 클릭해야만이 하위메뉴가 생기는데, 클릭을 하지 않아도 상시로 보이게 원합니다.
3시간동안 구조 파악하면서 해결하려 시도해봐도.. 지치네요.. 아시는분 계실까요.
1) HTML
<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
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
오메나... 스크립트로 해놔서 그런것같은데... php로한다면 key로 일부만 보임처리 할수있구요
클래스 active로 줘서 한개만 보여주게 하면될것같은데요
굳이 저렇게 ajax 이용해서 뿌려주고 할필요는 없는데... 이유를 모르겠네요
5시간을 붙들고 있다가 결국은 포기했네요.
도무지 모르겠어요 ㅜ
var sCateSelected = (checkInArray(sMyCateList, this.cate_no) == true) ? ' selected' : '';
이부분 이랑 값 뭘로 나온지 봐야되고 일치한다면 key 값에서 첫번째꺼 1을 이용해서 하면될것같아요
답변을 작성하시기 전에 로그인 해주세요.