모바일에서 카테고리를 누르면

중분류까지 다 펼쳐져 보여서

너무 복잡해서요

대분류들만 먼저 보여지고

화살표를 누르면 중분류들이 펼쳐지게 하고 싶은데

default.css 에는

#allMenu{position:fixed; display:none; left:0; top:0; bottom:0;   right:0; z-index:99999;  background:rgba(0,0,0,.5);}
#allMenu section{position:absolute; top:224px;  background:#FFF; left:50%; margin-left:-600px; padding:20px; box-shadow:1px 1px 10px rgba(0,0,0,.8);box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#allMenu section:after {display:block;visibility:hidden;clear:both;content:""}
#allMenu.open{display:block; }
#allMenu:after {display:block;visibility:hidden;clear:both;content:""}
#allMenu .toggleMenu{display:none;}
#allMenu dd{width:32.33%; float:left; margin:.5%; border:1px solid #DDD; height:200px;  box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#allMenu dd:nth-child(3n+2){clear:both;}
#allMenu ul:after {display:block;visibility:hidden;clear:both;content:""}
 
#allMenu dd > a{  font-size:16px; padding:10px; font-family:'ls'; display:block;  border-bottom:1px solid #EEE; }
#allMenu dd > ul{_display:inline-block;overflow:hidden;padding:10px; line-height:30px; zoom:1}
#allMenu dd > ul:after{display:block;clear:both;content:''; }
#allMenu dd > ul li{float:left; width:50%; }
#allMenu dd > ul li a{ display:block; padding:5px 0; line-height:20px;}
#allMenu dd.dd10 > ul li{width:100%;}
 

이렇게 써있고

head.php 에는

<div id="allMenu"> 
  <a href="javascript:;" onclick="$('#allMenu').toggleClass('open');" class="closeMenu">닫기</a>
  <section  class="wrap">
  <?
  include(G5_PATH.'/board_menu.php');
  ?>
  </section>
</div>
 

board_menu.php 에는

 <dl>
   <dt><a href="javascript:;" onclick="$('#allMenu').toggleClass('open');" class="toggleMenu">전체메뉴</a></dt><!--
    --><?
   $sql = " select * from {$g5['group_table']} where gr_order !='0' order by gr_order";
   $result = sql_query($sql);
   while ($group_row = sql_fetch_array($result)){
    $sql = " select * from {$g5['board_table']} where gr_id='{$group_row['gr_id']}' and bo_use_search !='' order by bo_order";
    $board_result = sql_query($sql);
    $board_list = array();
    for($i=0; $board_row = sql_fetch_array($board_result); $i++){
     $board_list[$i] = $board_row;
     $board_link[$i] = G5_BBS_URL."/board.php?bo_table=".$board_list[$i][bo_table];
    }
    $link = G5_BBS_URL."/board.php?bo_table=".$board_list[0][bo_table];
   ?><!--
    --><dd class="dd<?=$group_row[gr_id]?>">
    <a href="<?php echo $link ?>"><?=$group_row[gr_subject]?></a>
    <?
    if(count($board_list)){
    ?>
    <ul>
     <? for($i=0; $i<count($board_list); $i++){?>
     <li><a href="<?php echo $board_link[$i] ?>" ><?=$board_list[$i][bo_subject]?></a></li>
     <?}?>
     <? if($group_row['gr_id']==9 && $is_admin){?>
     <li><a href="<?=G5_BBS_URL?>/board.php?bo_table=quick" >빠른 상담신청내역</a></li>
     <li><a href="<?=G5_BBS_URL?>/board.php?bo_table=kakao" >카카오상담내역</a></li>
     
      <?}?>
    </ul>
    <?}?>
   </dd><!--
    --><?}?>
  </dl>

요렇게 써있습니다.

대분류만 남기고 중분류를 접었다 펼칠수 있도록 수정할 수 있을까요??

고수님들 도와주세요 ㅠㅜ