goods_list.html 수정

1
<a href=”?{cateType}Cd={.cateCd}”><span>{.cateNm} <!–{ ? naviDisplay.naviCount ==’y’ }–><em>({.goodsCnt+0})</em><!–{ / }–></span></a>
</li>
<!–{ / }–>
</ul>
<button type=”button” id=”category-more-btn”>더보기</button>
—————————————————————————————————————————————-
2
<button type=”button” id=”category-more-btn”>더보기</button>
</div>
<!–{ / }–>
<!–{ / }–>

<!–{ ? isCarCategory }–>
<div class=”list_item_car_type_category”>
<ul>
<!–{ @ goodsCarTypeCategoryList }–>
<li>
<a href=”?{cateType}Cd={cateCd}&carTypeCateCd={.cateCd}”>{.cateNm}<span>({.cnt})</span></a>
</li>
<!–{ / }–>
</ul>
</div>
<!–{ / }–>
—————————————————————————————————————————————-
3
$(‘:radio[name=”sort”][value=”{sort}”]’).prop(“checked”,”checked”)
$(‘:radio[name=”sort”][value=”{sort}”]’).next().addClass(‘on’);
$(‘#category-more-btn’).click(function() {
var ul = $(this).prev();

if( !ul.hasClass(‘more’) ) {
var category_cnt = ul.children(‘li’).length;
var max_height = Math.ceil(category_cnt / 5) * 39;
//$(this).prev().addClass(‘more’);
ul.css(‘max-height’, max_height);
ul.addClass(‘more’);
$(this).text(‘접기’)
}
else {
var category_cnt = ul.children(‘li’).length;
var max_height = 117;
//$(this).prev().addClass(‘more’);
ul.css(‘max-height’, max_height);
ul.removeClass(‘more’);
$(this).text(‘더보기’);
}

})

goods.css 수정

1
.goods_list_item_tit + .list_item_category{margin-top:-21px;}
.list_item_category{margin:0 0 40px 0; padding:3px 0 3px 0; border:1px solid #d8d8d8; border-top:1px solid #999999; text-align: center;}
.list_item_category ul{display:inline-block; width:100%; padding:0 20px 0 20px; font-size:0; overflow: hidden; max-height: 117px; transition: all 0.3s; text-align: left;}
.list_item_category ul.more {}
.list_item_category li{display:inline-block; width:20%; font-size:12px; text-align:center; vertical-align:middle; height: 39px;}

.list_item_category li a{display:block; padding:10px 10px 10px 10px; color:#414141; text-align:left;}

2
.list_item_category li.on em{font-weight:bold;}
#category-more-btn {padding: 15px; margin: 0 auto 0; font-size: 14px;}

.list_item_car_type_category {width: 100%; position: relative; padding-bottom: 20px;}
.list_item_car_type_category ul {width: 100%; display: inline-block; padding: 20px 0; font-size: 0;}
.list_item_car_type_category li {width: 20%; display: inline-block; }
.list_item_car_type_category li a {display: block; width: 80%; padding: 10px 10px 10px 0; color: #414141; text-align: left; font-size: 18px; font-weight: bold; border-bottom: 1px solid #ddd;}

/* ————- 인기상품 ————- */