서브메뉴질문
본문
<?
switch($bo_table){
case "product01_1" :
$main_menu = 'aaa';
$sub_menu = 'aaa-1';
break;
case "product02_1" :
$main_menu = 'bbb';
$sub_menu = 'bbb-1;
break;
case "product03_1" :
$main_menu = 'ccc';
$sub_menu = 'ccc-1';
break;
}
${"check_$bo_table"} = "on";
?>
<ul class="navi left_menu_list gnb-2dep">
<li>
<a href="#" class="<?=$check_product01_1?>">
<span>aa</span>
<i class="xi-angle-down-min list"></i>
</a>
<ul class="depth3_menu gnb-3dep" style="display:none;">
<li><a href="#">aaa-1</a></li>
<li><a href="#">aaa-2</a></li>
</ul>
</li>
<li>
<a href="#" class="<?=$check_product02_1?>">
<span>bbb</span>
<i class="xi-angle-down-min list"></i>
</a>
<ul class="depth3_menu" style="display:none;">
<li><a href="#">bbb-q</a></li>
<li><a href="#">bbb-2</a></li>
</ul>
</li>
<li>
<a href="#" class="<?=$check_product03_1?>">
<span>ccc</span>
<i class="xi-angle-down-min list"></i>
</a>
<ul class="depth3_menu" style="display:none;">
<li><a href="#">ccc-1</a></li>
<li><a href="#">ccc-2</a></li>
</ul>
</li>
</ul>
$(".left_menu_list>li>a").click(function(){
let index_num = $(".left_menu_list>li>a").index(this);
if($(".depth3_menu:eq("+index_num+")").css("display") != "block"){
$(".depth3_menu").slideUp();
$(this).find(".list").addClass("right");
$(".depth3_menu:eq("+index_num+")").slideToggle();
}
else{
$(".depth3_menu:eq("+index_num+")").slideUp();
$(this).find(".list").removeClass("right");
}
return false;
});
//클릭시 색상변경
$(".navi>li>a").click(function(){
$(".navi>li>a").removeClass("on")
$(this).addClass("on")
});
메뉴를 slideToggle로 하여서 밑으로 떨어지는 스타일로 작업을했는데요
depth3_menu 에 리스트메뉴를 클릭하면 slideup이돼서 다시 클릭해야하는 불편함이 있습니다.
해당 게시판에서는 그 메뉴에 해당되는 depth3_menu를 펼쳐놓는 방법이 있을까요??
답변 2
<ul class="navi left_menu_list gnb-2dep">
<li>
<a href="#" class="<?=$check_product01_1?>">
<span>aa</span>
<i class="xi-angle-down-min list"></i>
</a>
<ul class="depth3_menu gnb-3dep"<?if($bo_table!="product01_1") { ?> style="display:none;"<?}?>>
<li><a href="#">aaa-1</a></li>
<li><a href="#">aaa-2</a></li>
</ul>
</li>
<li>
<a href="#" class="<?=$check_product02_1?>">
<span>bbb</span>
<i class="xi-angle-down-min list"></i>
</a>
<ul class="depth3_menu"<?if($bo_table!="product02_1") { ?> style="display:none;"<?}?>>
<li><a href="#">bbb-q</a></li>
<li><a href="#">bbb-2</a></li>
</ul>
</li>
<li>
<a href="#" class="<?=$check_product03_1?>">
<span>ccc</span>
<i class="xi-angle-down-min list"></i>
</a>
<ul class="depth3_menu"<?if($bo_table!="product03_1") { ?> style="display:none;"<?}?>>
<li><a href="#">ccc-1</a></li>
<li><a href="#">ccc-2</a></li>
</ul>
</li>
</ul>
$sub_menu = 'bbb-1;
=>
$sub_menu = 'bbb-1';