1. 검색 키워드가 있을 경우
2. 카테고리 1차인 경우 별도 출력
3. 카테고리 2차인 경우 별도 출력
이런 구조에서 카테고리 1차에서 2차는 더보기 식으로 나타내려고 함.
카테고리1차 (더보기)
2차가 있을 경우 더보기 아이콘 노출 후
클릭하면 스크롤 가능한 구조로 나타내기.
@if($search_keyword)
<div class="keyword-box">
'{$search_keyword}'검색 결과 입니다. <span class="count">{$total_count}</span>
</div>
@endif
@if($category_list && !$search_keyword)
<div class="category-box">
<div class="cat-root">
@php
$args = new stdClass();
$args->module_srl = $module_info->module_srl;
$output = executeQuery('document.getDocumentCount', $args);
@endphp
<a href="{getUrl('','mid',$mid,'category','','page','','document_srl','')}" class="on"|cond="empty($category)">전체 {$output->data->count}</a>
@foreach($category_list as $val)
@if($val->parent_srl=='0')
<a href="{getUrl('category',$val->category_srl,'page','','document_srl','')}" class="on"|cond="($category ?? 0) == $val->category_srl">{$val->title} @if($val->document_count!=='0')<span class="cnt">{$val->document_count?$val->document_count:""}</span>@endif</a>
@endif
@endforeach
</div>
<div class="cat-sub">
@foreach($category_list as $val)
@if($val->parent_srl!=='0' && $val->parent_srl==$category)
<a href="{getUrl('category',$val->category_srl,'page','','document_srl','')}" class="on"|cond="$val->selected">#{$val->title} {$val->document_count}</a>
@endif
@endforeach
</div>
</div>
@endif
@if($error=='idontknow')
<div style="display:none;">
@php
$cate_list = array();
$current_key = null;
@endphp
@foreach($category_list as $key=>$val)
@if(!$val->depth)
@php
$cate_list[$key] = $val;
$cate_list[$key]->children = array();
$current_key = $key;
@endphp
@elseif($current_key)
@php
$cate_list[$current_key]->children[] = $val
@endphp
@endif
@endforeach
@if($module_info->use_category=='Y')
<ul class="cTab">
<li class="on"|cond="!$category"><a href="{getUrl('category','','page','')}">{$lang->total}</a></li>
@foreach($cate_list as $key => $val)
<li class="on"|cond="$category==$val->category_srl"><a href="{getUrl('category',$val->category_srl,'document_srl','', 'page', '')}">{$val->title}<!--<em cond="$val->document_count">[{$val->document_count}]</em>--></a>
@if(count($val->children))
<ul>
{$val->parent_srl} / {$val->category_srl}
@foreach($val->children as $idx => $item)
<li class="on"|cond="$category==$item->category_srl"><a href="{getUrl('category',$item->category_srl,'document_srl','', 'page', '')}">{$item->title}<!--<em cond="$val->document_count">[{$item->document_count}]</em>--></a></li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
@endif
</div>
@endif이 코드는 라이믹스 CMS의 게시판 스킨에서 카테고리 목록을 출력하는 부분을 구현하고 있습니다. 블레이드 문법을 사용하여 카테고리를 1차와 2차로 나누어 표시하고 있습니다.
@if($category_list && !$search_keyword): 카테고리 목록이 있고 검색 키워드가 없을 때만 카테고리 박스를 표시합니다.<div class="cat-root">: 1차 카테고리들을 표시하는 영역입니다.parent_srl=='0'인 카테고리들(1차 카테고리)을 반복하여 표시합니다.<div class="cat-sub">: 2차 카테고리들을 표시하는 영역입니다.$category)의 하위 카테고리들을 표시합니다.@if($category_list && !$search_keyword)
<div class="category-box">
<div class="cat-root">
@php
$args = new stdClass();
$args->module_srl = $module_info->module_srl;
$output = executeQuery('document.getDocumentCount', $args);
@endphp
<a href="{getUrl('','mid',$mid,'category','','page','','document_srl','')}" class="on"|cond="empty($category)">전체 {$output->data->count}</a>
@foreach($category_list as $val)
@if($val->parent_srl=='0')
@php
// 해당 1차 카테고리의 하위 카테고리가 있는지 확인
$has_subcategory = false;
foreach($category_list as $sub) {
if($sub->parent_srl == $val->category_srl) {
$has_subcategory = true;
break;
}
}
@endphp
<a href="{getUrl('category',$val->category_srl,'page','','document_srl','')}" class="on"|cond="($category ?? 0) == $val->category_srl">
{$val->title} @if($val->document_count!=='0')<span class="cnt">{$val->document_count?$val->document_count:""}</span>@endif
@if($has_subcategory)
<span class="more-icon" data-category="{$val->category_srl}"><i class="xi-angle-down-min"></i></span>
@endif
</a>
@endif
@endforeach
</div>
@foreach($category_list as $parent_val)
@if($parent_val->parent_srl=='0')
@php
// 현재 1차 카테고리에 해당하는 2차 카테고리 확인
$subcategories = [];
foreach($category_list as $sub) {
if($sub->parent_srl == $parent_val->category_srl) {
$subcategories[] = $sub;
}
}
@endphp
@if(count($subcategories) > 0)
<div class="cat-sub cat-sub-{$parent_val->category_srl}" style="display: none;">
<div class="cat-sub-scroll">
@foreach($subcategories as $sub)
<a href="{getUrl('category',$sub->category_srl,'page','','document_srl','')}" class="on"|cond="($category ?? 0) == $sub->category_srl">
#{$sub->title} @if($sub->document_count!=='0')<span class="cnt">{$sub->document_count}</span>@endif
</a>
@endforeach
</div>
</div>
@endif
@endif
@endforeach
</div>
<style>
.category-box {
position: relative;
}
.cat-root a {
position: relative;
display: inline-block;
margin-right: 15px;
}
.more-icon {
cursor: pointer;
margin-left: 5px;
}
.more-icon.active i {
transform: rotate(180deg);
}
.cat-sub {
margin-top: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.cat-sub.active {
max-height: 200px;
overflow-y: auto;
border-top: 1px solid #eee;
padding-top: 10px;
}
.cat-sub-scroll {
display: flex;
flex-wrap: wrap;
}
.cat-sub a {
margin-right: 10px;
margin-bottom: 5px;
}
</style>
<script>
$(document).ready(function() {
$('.more-icon').click(function(e) {
e.preventDefault();
e.stopPropagation();
var categoryId = $(this).data('category');
var subCategory = $('.cat-sub-' + categoryId);
// 다른 열린 서브카테고리 닫기
$('.cat-sub.active').not(subCategory).removeClass('active');
$('.more-icon.active').not(this).removeClass('active');
// 현재 서브카테고리 토글
$(this).toggleClass('active');
subCategory.toggleClass('active');
});
});
</script>
@endifdata-category 속성을 통해 어떤 1차 카테고리에 속하는지 식별합니다.cat-sub-{$parent_val->category_srl}).display: none).이 구현은 사용자가 1차 카테고리 옆의 더보기 아이콘을 클릭하면 해당 카테고리의 2차 카테고리가 나타나고, 다시 클릭하거나 다른 카테고리의 더보기를 클릭하면 닫히는 방식으로 작동합니다.
1
5
12
8
3
3
3
3
0
12
이온디에서 실시간으로 많이 검색된 검색어 순위
Display Emoticons
Add Images
Poll
Image Gallery
템플릿
<ul class="cTab"> <li class="on"|cond="empty($category)"><a href="{getUrl('category','','page','')}">전체 {$output->data->count}</a></li> @foreach($cate_list as $key => $val) <li class="depth1 @if(($category ?? 0) == $val->category_srl)on@endif"><a href="{getUrl('category',$val->category_srl,'document_srl','', 'page', '')}">{$val->title} @if($val->document_count!=='0')<span class="cnt">{$val->document_count?$val->document_count:""}</span>@endif</a> @if(!empty($val->children)) <button class="btnCateMore">더보기</button> <ul class="depth2"> @foreach($val->children as $idx => $item) <li class="on"|cond="$category==$item->category_srl"> <a href="{getUrl('category',$item->category_srl,'document_srl','', 'page', '')}">{$item->title} @if($item->document_count!=='0')<span class="cnt">{$item->document_count?$item->document_count:""}</span>@endif</a> </li> @endforeach </ul> @endif </li> @endforeach </ul> <script> $(document).ready(function() { $(".btnCateMore").click(function(event) { var $depth2 = $(this).next(".depth2"); // 모든 .depth2에서 on 제거 (현재 클릭한 요소 제외) $(".depth2").not($depth2).removeClass("on"); // 클릭한 버튼의 다음 depth2에 on 클래스 토글 $depth2.toggleClass("on"); // 이벤트 버블링 방지 (document 클릭 방지) event.stopPropagation(); }); // 문서 클릭 시 .depth2의 on 제거 $(document).click(function() { $(".depth2").removeClass("on"); }); // 스크롤 시 .depth2의 on 제거 $(window).on("scroll", function() { $(".depth2").removeClass("on"); }); // depth1 내부에 선택된 항목이 있으면 on 클래스 추가 $(".depth1").each(function() { if ($(this).find("li.on").length > 0) { $(this).addClass("on"); } }); }); </script>