메뉴에 아코디언을 적용하려고 합니다 채택완료
미네7
4년 전
조회 2,388
테스트 주소는 http://testtesttest.webable.kr/
대메뉴를 클릭하면 소메뉴가 뜨는 아코디언을 만들고 있는데
대메뉴2를 눌러도 대메뉴1의 소메뉴들이 사라지지 않습니다..ㅠ
마크업은 기본 그누보드 헤더 마크업을 쓰고 있고, css와 스크립트는 아래처럼 썼습니다.
</p>
<p><nav id="gnb">
<h2>메인메뉴</h2>
<div class="gnb_wrap">
<ul id="gnb_1dul">
<li class="gnb_1dli gnb_mnal"><button type="button" class="gnb_menu_btn"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$menu_datas = array();</p>
<p> for ($i=0; $row=sql_fetch_array($result); $i++) {
$menu_datas[$i] = $row;</p>
<p> $sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
$menu_datas[$i]['sub'][$k] = $row2;
}</p>
<p> }</p>
<p> $i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
?>
<li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?><!--<img src="<?=G5_IMG_URL?>/menu_<?php echo $i ?>.png" />--></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){</p>
<p> if( empty($row2) ) continue;</p>
<p> if($k == 0)
echo '<span class="bg">하위분류</span><ul class="gnb_2dul">'.PHP_EOL;
?>
<li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2</p>
<p> if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row</p>
<p> if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul></p>
<p> <div id="gnb_all">
<h2>전체메뉴</h2>
<ul class="gnb_al_ul">
<?php</p>
<p> $i = 0;
foreach( $menu_datas as $row ){
?>
<li class="gnb_al_li">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_al_a"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><i class="fa fa-caret-right" aria-hidden="true"></i> <?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2</p>
<p> if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row</p>
<p> if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?>
<a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<button type="button" class="gnb_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>
</nav></p>
<p>
</p>
<p><script>
$(function(){
$(".gnb_1dli .bg").click(function(){
var submenu = $(this).next(".gnb_2dul");</p>
<p> // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideToggle();
}else{
submenu.stop().toggle(500);
}
});
});
</script></p>
<p>
대메뉴1을 눌렀을때 소메뉴가 뜨는건 맞는데
대메뉴2를 눌렀을땐 대메뉴2의 소메뉴가 뜨고
대메뉴1의 소메뉴는 자동으로 사라졌으면 좋겠습니다.
각각의 아코디언을 쓰려면 어떻게 해야할까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인