테스트 사이트 - 개발 중인 베타 버전입니다

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

미네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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</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개

채택된 답변
+20 포인트
4년 전

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

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

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

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

미네7
4년 전
감사합니다 아주 깔끔하게 해결했습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인