아코디언 메뉴가 자동으로 안접힙니다 ㅠ
본문
안녕하세요.
왼쪽 사이드에 고정되어 있는 메뉴를 아코디언 메뉴로 변경하고 싶어서 기존 코드에 아코디언 코드를 짜집기하고 있는데요 ㅠ
대메뉴(카테고리메뉴)를 클릭했을시 서브메뉴가 잘 보이고 열고 닫히는게 잘 됩니다.
그런데 문제는 ㅠ 다른 대메뉴를 클릭하면
열려져있던 대메뉴와 서브메뉴가 접히고 새롭게 클릭한 대메뉴와 그에 속한 서브 메뉴가 펼쳐져야 하는데 ... 새롭게 클릭한 대메뉴에 속한 서브메뉴를 클릭해야 기존에 펼쳐져 있던 메뉴들이 접힙니다. ㅠ
다른 메뉴 클릭시 열려져있던 대메뉴와 서브메뉴가 자동으로 접히지 않고 있습니다. 일일이 다시 한번 클릭해서 닫아 주던가 새롭게 다른 메뉴를 클릭해서 펼쳐진 서브메뉴를 클릭 해야 비로소 기존 펼쳐졌던 메뉴들이 접히는데 ... 중복 클릭해주지 않고 다른 대메뉴를 클릭했을때 새로운 메뉴들은 펼쳐지고 기존 메뉴들은 자동으로 접히게 하고 싶습니다.
어떤 부분이 누락이 된것일까요?? 아래 코드한번 살펴봐주시면 감사하겠습니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<div class="menuBox">
<ul class="sidebar-menu" id="<?php echo $menu_id;?>">
<?php
for($i=1; $i < $menu_cnt; $i++) {
$cate_id = $menu_id.'_c'.$i;
$sub_id = $menu_id.'_s'.$i;
if(!$menu[$i]['gr_id']) continue;
?>
<?php if($menu[$i]['is_sub']) { //서브메뉴가 있을 때 ?>
<li class="first_depth<?php echo ($menu[$i]['on'] == "on" || $i =="1" && $is_main) ? ' active' : '';?><?php echo ($menu[$i]['ref']) ? ' ref ref-'.$menu[$i]['ref'] : '';?>" role="tab" id="<?php echo $cate_id;?>">
<a href="#<?php echo $sub_id;?>" data-toggle="collapse" data-parent="#<?php echo $menu_id;?>" aria-expanded="true" aria-controls="<?php echo $sub_id;?>" class="is-sub<?php echo $menu[$i]['class'];?>"<?php echo ($menu[$i]['ref']) ? ' ref="'.$menu[$i]['ref'].'"' : '';?>>
<span class="ca-href pull-right" onclick="sidebar_href('<?php echo $menu[$i]['href']; ?>');"> </span>
<?php echo $menu[$i]['name']; ?>
<?php echo ($menu[$i]['new'] == "new") ? $menu_new : '';?>
</a>
</li>
<li id="<?php echo $sub_id;?>" class="panel-collapse collapse<?php echo ($menu[$i]['on'] == "on" || $i =="1" && $is_main) ? ' in' : '';?>" role="tabpanel" aria-labelledby="<?php echo $cate_id;?>">
<ul>
<?php for($j=0; $j < count($menu[$i]['sub']); $j++) { ?>
<?php if($menu[$i]['sub'][$j]['line']) { //구분라인 ?>
<li class="ca-line">
<?php echo $menu[$i]['sub'][$j]['line'];?>
</li>
<?php } ?>
<li<?php echo ($menu[$i]['sub'][$j]['on'] == "on") ? ' class="on"' : '';?>>
<a href="<?php echo $menu[$i]['sub'][$j]['href'];?>" class="i" <?php echo $menu[$i]['sub'][$j]['target'];?>>
<?php echo $menu[$i]['sub'][$j]['name']; ?>
<?php echo ($menu[$i]['sub'][$j]['new'] == "new") ? $menu_new : '';?>
<?php if($menu[$i]['sub'][$j]['new'] == "new") { ?>
<i class="i mti-new sub-new"></i>
<?php } ?>
</a>
</li>
<?php } ?>
</ul>
</li>
<?php } else { ?>
<li class="ca-head<?php echo ($menu[$i]['on'] == "on") ? ' active' : '';?><?php echo ($menu[$i]['ref']) ? ' ref ref-'.$menu[$i]['ref'] : '';?>">
<a href="<?php echo $menu[$i]['href'];?>"<?php echo $menu[$i]['target'];?> class="no-sub<?php echo $menu[$i]['class'];?>"<?php echo ($menu[$i]['ref']) ? ' ref="'.$menu[$i]['ref'].'"' : '';?>>
<?php echo $menu[$i]['name'];?>
<?php echo ($menu[$i]['new'] == "new") ? $menu_new : '';?>
<?php if($menu[$i]['new'] == "new") { ?>
<i class="i mti-new new"></i>
<?php } ?>
</a>
</li>
<?php } ?>
<?php } ?>
</ul>
</div>
<script>
// Sidebar Menu
$('.sidebar-menu .ca-head').on('click', function () {
var clicked_toggle = $(this);
if(clicked_toggle.hasClass('active')) {
clicked_toggle.parents('.sidebar-menu').find('.ca-head').removeClass('active');
} else {
clicked_toggle.parents('.sidebar-menu').find('.ca-head').removeClass('active');
clicked_toggle.addClass('active');
}
});
</script>
답변 2
아코디언 메뉴의 동작 문제를 해결하기 위해 제시해 주신 코드를 살펴봤습니다. 현재 코드에서는 'ca-head' 클래스를 가진 메뉴 항목의 클릭 이벤트만 처리하고 있으며, 이는 서브 메뉴가 없는 메뉴 항목에 대한 처리입니다. 그러나 문제는 서브 메뉴를 포함하는 메뉴 항목의 동작과 관련이 있어 보입니다.
서브 메뉴가 있는 항목의 경우, 다른 메뉴를 클릭했을 때 현재 열려 있는 서브 메뉴를 자동으로 닫고 새롭게 선택된 메뉴의 서브 메뉴를 열어야 합니다. 이를 위해 jQuery 코드를 다음과 같이 수정할 수 있습니다:
// 아코디언 메뉴의 동작을 위한 스크립트
$('.sidebar-menu li.first_depth > a').on('click', function(e) {
e.preventDefault(); // 기본 이벤트 방지
var currentElement = $(this);
var collapseSection = currentElement.attr('href');
if (!currentElement.closest('li').hasClass('active')) {
// 다른 모든 열린 섹션을 닫고 현재 섹션을 엽니다.
$('.panel-collapse').removeClass('in'); // 모든 서브메뉴 접기
$(collapseSection).addClass('in'); // 현재 클릭한 서브메뉴 열기
$('.first_depth').removeClass('active'); // 모든 메뉴 항목의 활성화 상태 제거
currentElement.closest('li').addClass('active'); // 현재 메뉴 항목 활성화
} else {
// 이미 활성화된 섹션을 클릭한 경우, 닫기
$(collapseSection).removeClass('in');
currentElement.closest('li').removeClass('active');
}
});
이 스크립트는 다음을 수행합니다:
- 모든
first_depth에 있는<a>태그에 클릭 이벤트를 연결합니다. - 클릭 이벤트가 발생하면, 현재 클릭된 항목의
href속성 값을 사용하여 연결된 패널을 찾습니다. - 현재 클릭된 메뉴 항목이 이미 활성화되어 있지 않다면, 모든 서브 메뉴를 닫고 현재 서브 메뉴만을 엽니다.
- 만약 이미 활성화된 메뉴 항목을 다시 클릭했다면, 그 서브 메뉴를 닫습니다.
이 코드는 기존의 <script> 태그에 추가하거나 기존의 스크립트를 수정하여 사용할 수 있습니다. 확인 후 적절하게 조정하면 원하는 대로 아코디언 메뉴의 동작을 구현할 수 있을 것입니다.
----
With GPT
많은 참고가 되었습니다. 답변 감사드립니다~!!