메뉴에 아코디언을 적용하려고 합니다

메뉴에 아코디언을 적용하려고 합니다

QA

메뉴에 아코디언을 적용하려고 합니다

본문

테스트 주소는 http://testtesttest.webable.kr/

대메뉴를 클릭하면 소메뉴가 뜨는 아코디언을 만들고 있는데

대메뉴2를 눌러도 대메뉴1의 소메뉴들이 사라지지 않습니다..ㅠ

마크업은 기본 그누보드 헤더 마크업을 쓰고 있고, css와 스크립트는 아래처럼 썼습니다.


<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();
            for ($i=0; $row=sql_fetch_array($result); $i++) {
                $menu_datas[$i] = $row;
                $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;
                }
            }
            $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 ){
                    if( empty($row2) ) continue;
                    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
                if($k > 0)
                    echo '</ul>'.PHP_EOL;
                ?>
            </li>
            <?php
            $i++;
            }   //end foreach $row
            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>
        <div id="gnb_all">
            <h2>전체메뉴</h2>
            <ul class="gnb_al_ul">
                <?php
                $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
                    if($k > 0)
                        echo '</ul>'.PHP_EOL;
                    ?>
                </li>
                <?php
                $i++;
                }   //end foreach $row
                if ($i == 0) {  ?>
                    <li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><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>
     
<script>
$(function(){
    $(".gnb_1dli .bg").click(function(){
        var submenu = $(this).next(".gnb_2dul");
        // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
        if( submenu.is(":visible") ){
            submenu.slideToggle();
        }else{
            submenu.stop().toggle(500);
        }
    });
});
</script>

대메뉴1을 눌렀을때 소메뉴가 뜨는건 맞는데

대메뉴2를 눌렀을땐 대메뉴2의 소메뉴가 뜨고

대메뉴1의 소메뉴는 자동으로 사라졌으면 좋겠습니다.

각각의 아코디언을 쓰려면 어떻게 해야할까요?

이 질문에 댓글 쓰기 :

답변 1

.gnb_1dli 가 오픈 되었을때 별도로 주는 클래스가 없으시다면,

submenu에 슬라이드 효과를 주기 전에 

오픈 되어 있는 .gnb_1dli 를 먼저 닫아주시면 됩니다.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 81
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT