카페24.. 하위메뉴 상시 보이게 원합니다.

카페24.. 하위메뉴 상시 보이게 원합니다.

QA

카페24.. 하위메뉴 상시 보이게 원합니다.

본문

2105812329_1681823813.3821.jpg

 

 

1. 개발자도구 평소상태

2105812329_1681824083.0506.jpg

 

2. 개발자도구 a.cate 클릭한 상태

2105812329_1681824088.964.jpg

 

 

카페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 이용해서 뿌려주고 할필요는 없는데... 이유를 모르겠네요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT