카테고리 슬라이드 오류 질문입니다.
본문
안녕하세요. 항상 친절하게 도움 주시고 답변해주셔서 감사합니다!
덕분에 사이트 완성도도 높아지고 준비를 더 꼼꼼하게 할 수 있어 항상 감사한 마음을 가지고 있습니다 ㅠㅠ
다름이 아니라 제가 테마를 strawberry 를 쓰고 있고 모든 스킨을 테마스킨을 적용시킨 후 사용하고 있습니다.
그런데 카테고리 부분에서 1차 분류인 전체 브랜드가 있고 그에 하위분류인 야옹다옹이라는 카테고리가 있습니다.
제가 의문이 드는 것은
전체 브랜드에서 이 화살표 방향을 클릭하면 밑에 하위 브랜드가 나오는 식의 메뉴 구현이 되어있는 것 같은데 아무리 클릭을 해봐도 슬라이드가 구현이 되지 않습니다...
분류에 잘못이 있는 것은 아닌 것 같은게 상단 메뉴바에서 브랜드 위에 커서를 올리면 야옹다옹이라는 메뉴가 정상적으로 잘 표시가 됩니다. 그래서 카테고리를 담당하는 파일을 찾아봤는데
홈페이지 내에서 찾아본 소스는 다음과 같았고
<!-- 쇼핑몰 카테고리 시작 { -->
<nav id="gnb">
<h2>쇼핑몰 카테고리</h2>
<ul id="gnb_1dul">
<li class="gnb_1dli"><button type="button" id="menu_open"><i class="fa fa-bars" aria-hidden="true"></i> <span class="sound_only">카테고리</span></button></li>
<li class="gnb_1dli" style="z-index:998">
<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya" class="gnb_1da gnb_1dam">전체 브랜드</a>
<ul class="gnb_2dul" style="z-index:998"> <li class="gnb_2dli"><a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya01" class="gnb_2da">야옹다옹</a></li>
</ul> </li>
</ul>
</nav>
<!-- } 쇼핑몰 카테고리 끝 --> <div id="category">
<div class="ct_wr">
<button type="button" class="close_btn"> 카테고리<span class="sound_only">닫기</span><i class="fa fa-times" aria-hidden="true"></i></button>
<ul class="cate">
<li class="cate_li_1">
<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya" class="cate_li_1_a">전체 브랜드</a>
<ul class="sub_cate sub_cate1">
<li class="cate_li_2">
<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya01">야옹다옹</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(function (){
var $category = $("#category");
$("#menu_open").on("click", function() {
$category.css("display","block");
});
$("#category .close_btn").on("click", function(){
$category.css("display","none");
});
});
$(document).mouseup(function (e){
var container = $("#category");
if( container.has(e.target).length === 0)
container.hide();
});
</script>
</div>
shop/category.php에서는 이렇게 표현되어 있습니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
function get_mshop_category($ca_id, $len)
{
global $g5;
$sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']}
where ca_use = '1' ";
if($ca_id)
$sql .= " and ca_id like '$ca_id%' ";
$sql .= " and length(ca_id) = '$len' order by ca_order, ca_id ";
return $sql;
}
?>
<div id="category">
<button type="button" class="close_btn"><i class="fa fa-times" aria-hidden="true"></i> 카테고리<span class="sound_only">닫기</span></button>
<div class="ct_wr">
<?php
$mshop_ca_res1 = sql_query(get_mshop_category('', 2));
for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
if($i == 0)
echo '<ul class="cate">'.PHP_EOL;
?>
<li class="cate_li_1">
<a href="<?php echo shop_category_url($mshop_ca_row1['ca_id']); ?>" class="cate_li_1_a"><?php echo get_text($mshop_ca_row1['ca_name']); ?></a>
<?php
$mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));
for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
if($j == 0)
echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
?>
<li class="cate_li_2">
<a href="<?php echo shop_category_url($mshop_ca_row2['ca_id']); ?>"><?php echo get_text($mshop_ca_row2['ca_name']); ?></a>
</li>
<?php
}
if($j > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($i > 0)
echo '</ul>'.PHP_EOL;
else
echo '<p class="no-cate">등록된 분류가 없습니다.</p>'.PHP_EOL;
?>
</div>
</div>
<script>
$(function (){
var $category = $("#category");
$("#menu_open").on("click", function() {
$category.css("display","block");
});
$("#category .close_btn").on("click", function(){
$category.css("display","none");
});
});
$(document).mouseup(function (e){
var container = $("#category");
if( container.has(e.target).length === 0)
container.hide();
});
</script>
/html/theme/strawberry/skin/shop/basic/listcategory.skin.php
에는
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$str = '';
$exists = false;
$ca_id_len = strlen($ca_id);
$len2 = $ca_id_len + 2;
$len4 = $ca_id_len + 4;
// 최하위 분류의 경우 상단에 동일한 레벨의 분류를 출력해주는 코드
if (!$exists) {
$str = '';
$tmp_ca_id = substr($ca_id, 0, strlen($ca_id)-2);
$tmp_ca_id_len = strlen($tmp_ca_id);
$len2 = $tmp_ca_id_len + 2;
$len4 = $tmp_ca_id_len + 4;
// 차차기 분류의 건수를 얻음
$sql = " select count(*) as cnt from {$g5['g5_shop_category_table']} where ca_id like '$tmp_ca_id%' and ca_use = '1' and length(ca_id) = $len4 ";
$row = sql_fetch($sql);
$cnt = $row['cnt'];
$sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where ca_id like '$tmp_ca_id%' and ca_use = '1' and length(ca_id) = $len2 order by ca_order, ca_id ";
$result = sql_query($sql);
while ($row=sql_fetch_array($result)) {
$sct_ct_here = '';
if ($ca_id == $row['ca_id']) // 활성 분류 표시
$sct_ct_here = 'sct_ct_here';
$str .= '<li>';
if ($cnt) {
$str .= '<a href="./list.php?ca_id='.$row['ca_id'].'" class="sct_ct_parent '.$sct_ct_here.'">'.$row['ca_name'].'</a>';
$sql2 = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where ca_id like '{$row['ca_id']}%' and ca_use = '1' and length(ca_id) = $len4 order by ca_order, ca_id ";
$result2 = sql_query($sql2);
$k=0;
$add_str = '';
while ($row2=sql_fetch_array($result2)) {
$add_str .= '<div class="sct_ct_child"><a href="./list.php?ca_id='.$row2['ca_id'].'">'.$row2['ca_name'].'</a></div>';
$k++;
}
if($add_str){ //해당 분류의 하위분류가 있으면
$str .= '<button type="button" class="mn_op"><i class="fa fa-chevron-down" aria-hidden="true"></i><span class="sound_only">하위분류</span></button>'.$add_str;
}
} else {
$str .= '<a href="./list.php?ca_id='.$row['ca_id'].'" class="sct_ct_parent '.$sct_ct_here.'">'.$row['ca_name'].'</a>';
}
$str .= '</li>';
$exists = true;
}
}
$sct_sort_href = $_SERVER['SCRIPT_NAME'].'?';
if($ca_id)
$sct_sort_href .= 'ca_id='.$ca_id;
else if($ev_id)
$sct_sort_href .= 'ev_id='.$ev_id;
if($skin)
$sct_sort_href .= '&skin='.$skin;
$sct_sort_href .= '&sort=';
if ($exists) {
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_CSS_URL.'/style.css">', 0);
?>
<div class="con_left">
<!-- 상품분류 2 시작 { -->
<aside id="sct_ct_2" class="sct_ct">
<h2>카테고리</h2>
<ul>
<?php echo $str; ?>
</ul>
</aside>
<!-- } 상품분류 2 끝 -->
<!-- 상품 정렬 선택 시작 { -->
<section id="sct_sort">
<h2>상품 정렬</h2>
<ul>
<li><a href="<?php echo $sct_sort_href; ?>it_sum_qty&sortodr=desc">판매많은순</a></li>
<li><a href="<?php echo $sct_sort_href; ?>it_price&sortodr=asc">낮은가격순</a></li>
<li><a href="<?php echo $sct_sort_href; ?>it_price&sortodr=desc">높은가격순</a></li>
<li><a href="<?php echo $sct_sort_href; ?>it_use_avg&sortodr=desc">평점높은순</a></li>
<li><a href="<?php echo $sct_sort_href; ?>it_use_cnt&sortodr=desc">후기많은순</a></li>
<li><a href="<?php echo $sct_sort_href; ?>it_update_time&sortodr=desc">최근등록순</a></li>
</ul>
</section>
<ul id="sct_lst">
<li><button type="button" class="sct_lst_view sct_lst_list"><i class="fa fa-th-list" aria-hidden="true"></i><span class="sound_only">리스트뷰</span></button></li>
<li><button type="button" class="sct_lst_view sct_lst_gallery"><i class="fa fa-th-large" aria-hidden="true"></i><span class="sound_only">갤러리뷰</span></button></li>
</ul>
</div>
<!-- } 상품 정렬 선택 끝 -->
<?php } ?>
어디를 고쳐야 카테고리가 정상적으로 슬라이드 될까요? ㅠㅠㅠ 재설치를 해보고 계속 찾아봐도 제가 html과 css는 어느정도 이제 볼줄 아는데 자바는 아직 저에게 많이 어렵네요...ㅜㅜ 더 열심히 공부하도록 하겠습니다.
현재 사이트는 http://jhjb1445.dothome.co.kr/shop/ 입니다. 미숙한 실력 정말 죄송합니다...
답변 1
하위분류는 정상적으로 있긴 한데
그 화살표를 눌렀을 때 그게 보이는 스크립트가 없는거 같아요
<script>
$(".mn_op").click(function() {
$(".sct_ct_child").css("display","block");
});
</script>
을 넣으시면 보일거 같아요
원래 화살표 클릭하면 화살표가 반대로 바뀌면서 그거 다시 클릭하면 숨겨져야 하는데..
아니면 http://jhjb1445.dothome.co.kr/theme/strawberry/skin/shop/basic/style.css?ver=191202
css 432줄에서 #sct_ct_2 li .sct_ct_child을 display:block으로 바꿔보세요
아 이렇게 하는 방법들이 있었네요ㅠㅠㅠ 알려주신 방법 두개를 다 해보고 먼저 말씀해주신 해결 방법으로 잘 해결됐습니다!
다시 버튼을 클릭하면 메뉴가 올라가는 것도 열심히 공부하면서 해결해보겠습니다. 알려주셔서 정말 감사합니다 ㅠㅠㅠ
위 소스를 응용하여
클릭 -> 화살표 반대 이미지 보임(원 화살표 숨김) & 카테고리 보임 -> 반대 이미지 클릭 시 반대 이미지 숨김(원 화살표 보임) & 카테고리 숨김
이렇게 해보세요
지금 현 상태에서는 클릭했을 때 메뉴가 잘 내려오지만 버튼이 위쪽 버튼으로 바뀌지는 않는 상황입니다. 이때 버튼을 바꿔주려면 어떻게 해야 할까요? 그 방법만 알 수 있다면 다시 메뉴를 숨기는방법도 가능 할 수 있을 것 같습니다 ㅠㅠ
버튼을 생성하시고 css에서 display none으로 해주세요 그리고 위 소스에서 하나 더 추가해서 display block으로 바꿔주는거죠
아아 저 버튼을 가져다가 새롭게 제작을 하면 간단하게 해결되겠네요! 추가질문했는데도 친절히 알려주셔서 감사합니다. 알려주신 방법대로 응용해서 제 힘으로 한번 만들어보겠습니다! 멋진 사이트를 완성하는 그날까지... 답변해주셔서 감사합니다!!
