펼침메뉴 고정하기 질문드립니다.
본문
스크립트로 펼침메뉴(세로)를 만들고 있는데
일단 펼침은 되는데 하위메뉴를 클릭하면 메뉴들이 모두 닫힙니다.
1차 카테고리는 2차 카테고리가 열리면서 하위메뉴가 보여지는데
2차 카테고리를 클릭하면 1차 카테고리만 보여지고 모두 닫혀지네요~
1차와 2차 카테고리를 고정시키고 싶습니다. 방법이 있을지......ㅠ ㅜ
아래 소스는 HTML 입니다.
<div id='cssmenu' >
<ul class="menuCategory">
<li class='has-sub {$selected}' module="product_displaycategory" style="display:{$display};"><a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="count {$product_count_display|display}">({$product_count})</span></a>
<ul module="product_children">
<li class='has-sub2 {$selected}' style="display:{$display};"><a href="/product/list.html?{$param_cate_no}" >{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
<ul module="product_children" class="subCategory">
<li class='has-sub3 {$selected}'><a href="/product/list.html?{$param_cate_no}"><i class='fas fa-caret-right'></i> {$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
<li class='has-sub3 {$selected}' ><a href="/product/list.html?{$param_cate_no}"><i class='fas fa-caret-right'></i> {$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
</ul>
</li>
<li class='has-sub2 {$selected}' style="display:{$display};"><a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
<ul module="product_children" class="subCategory">
<li class='has-sub3 {$selected}'><a href="/product/list.html?{$param_cate_no}"><i class='fas fa-caret-right'></i> {$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
<li class='has-sub3 {$selected}'><a href="/product/list.html?{$param_cate_no}"><i class='fas fa-caret-right'></i> {$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
var iCateNo = getQueryString('cate_no');
if (!iCateNo){
$('#cssmenu li.active').addClass('active').children('li').show();
//$('#cssmenu li.has-sub3.active').addClass('active').children('li.has-sub2').show();
return false;
}
var sFindString = 'cate_no='+iCateNo;
$('#cssmenu li.has-sub>a').each(function() {
var iIndex = $(this).attr('href').indexOf(sFindString);
if (iIndex > -1) {
$(this).parent().addClass('active');
//$(this).parent().hasClass('open');
$(this).parent().find('li').removeClass('open');
$(this).parent().find('ul').slideDown(350);
}
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
