토글 닫기가 안됩니다. 도와주세요 ㅠㅠ

토글 닫기가 안됩니다. 도와주세요 ㅠㅠ

QA

토글 닫기가 안됩니다. 도와주세요 ㅠㅠ

답변 1

본문

ㅠㅠ 메인에서는 토글을 눌렀을때 열기만 되고 닫히지는 않습니다.

그러나 서브에서는 열기 닫기 모두 정상으로 작동합니다. 무엇이 문제일까요?

 

html 구조는 이렇습니다


<div id="btn_side">
            <button type="button" id="side_mn_btn"><a href="#"><span class="sound_only"> 메뉴 열기</span></a></button>
			</div>
			 <div id="side_menu">
            <div class="side_close"><button type="button">닫기</button></div>
            <div class="side_wr add_side_wr">
                <aside id="isroll_wrap" class="side_inner_rel">
                    <div class="side_inner_abs">
                        <nav class="side_menu">
                            <ul>
                                <?php
                                $sql = " select *
                                            from {$g5['menu_table']}
                                            where me_mobile_use = '1'
                                              and length(me_code) = '2'
                                            order by me_order, me_id ";
                                $result = sql_query($sql, false);
 
                                for ($i=0; $row=sql_fetch_array($result); $i++) {
                                ?>
                                <li class="mu_title">
                                    <?php
                                    $submenus = '';
 
                                    $sql2 = " select *
                                                from {$g5['menu_table']}
                                                where me_mobile_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++) {
                                        if($k == 0) {
                                            $submenus .= '<button type="button" class="sub_toggle">하위메뉴</button>'.PHP_EOL;
                                            $submenus .= '<ul class="sub_menu">'.PHP_EOL;
                                        }
 
                                        $submenus .= '<li><a href="'.$row2['me_link'].'" target="_'.$row2['me_target'].'" class="gnb_2da">'.$row2['me_name'].'</a></li>'.PHP_EOL;
                                    }
 
                                    if($k > 0)
                                        $submenus .= '</ul>'.PHP_EOL;
 
                                    if($submenus)
                                        $gnb_class = 'sd_cl';
                                    else
                                        $gnb_class = 'sd_cl';
                                    ?>
                                    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="<?php echo $gnb_class; ?>"><?php echo $row['me_name'] ?></a>
                                    <?php echo $submenus; ?>
                                </li>
                            <?php
                            }
 
                            if ($i == 0) {  ?>
                                <li id="side_menu_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하세요.<?php } ?></li>
                            <?php } ?>
                            </ul>
                        </nav>
                    </div>
                </aside>
            </div>
        </div>
		</div>

 

그리고 쿼리는 이렇습니다

 


//사이드 메뉴
var $btn_side = $("#btn_side"),
    $side_menu = $("#side_menu"),
    $side_wr = $("#side_menu .side_wr"),
    side_obj = { my : {} },
    is_trans_sup = '';
 
$side_wr.css({"right":"-280px"});   //초기화
 
side_obj.destory = function(){
    if( !is_trans_sup ) return;
    side_obj.my.destroy();
}
side_obj.refresh = function(){
    if( !is_trans_sup ) return;
    side_obj.my.refresh();
}
 
function iscroll_loaded() {
    if( is_trans_sup ){
        $side_wr.removeClass("add_side_wr");
        side_obj.my = new IScroll('#isroll_wrap', { bounceTime : 400, mouseWheel: true, click: true, hScroll:false });
    }
}
 
$btn_side.on("click", function() {
    if (!$(this).data('toggle_enable')) {
        $(this).data('toggle_enable', true);
        $side_menu.show();
        $side_wr.animate({"right": "0px"}, 200, function(){
            iscroll_loaded();
            height_update($(this));
        });
    } else {
        remove_side_data();
    }
});
 
$(document).on("click", ".side_close", function(e){
    if ( !$(e.target).closest("#btn_side").length && $btn_side.data('toggle_enable') ){
        remove_side_data();
    }
})
 
function height_update(target){
    var side_wr_height = target.height();
    $("body").css({"min-height":side_wr_height+"px"}).addClass("over_hidden");
}
 
function remove_side_data(){
    $btn_side.data('toggle_enable', false);
    $side_wr.animate({"right": "-280px"}, 160, function(){
        $side_menu.hide();
        $("body").removeClass("over_hidden").css({"min-height":""});
    });
}
 
$("#side_menu .side_wr").on("clickoutside", function(e){
    //if ( !$(e.target).is('#btn_side *, #btn_side') ){
    if ( !$(e.target).closest("#btn_side").length && $btn_side.data('toggle_enable') ){
        remove_side_data();
    }
});
 
// 서브메뉴 열기
$(function (){
    $(".sub_toggle").on("click", function() {
        var $this = $(this);
        $sub_ul = $(this).closest("li").children("ul.sub_menu");
 
        if($sub_ul.size() > 0) {
            var txt = $this.text();
 
            if($sub_ul.is(":visible")) {
                txt = txt.replace(/닫기$/, "열기");
                $this
                    .removeClass("sd_cl")
                    .text(txt);
            } else {
                txt = txt.replace(/열기$/, "닫기");
                $this
                    .addClass("sd_cl")
                    .text(txt);
            }
 
            $sub_ul.toggle();
        }
    });
});
</script>

이 질문에 댓글 쓰기 :

답변 1

이런 질문은 실제 사이트를 보여 주시는 것이 좋습니다. 

 

개발자 도구나 요소 검사 등에서 에러가 나는지 확인해 볼 수 있습니다. 

사이드메뉴 스크립트 중에

$(document).on("click", ".side_close", function(e){
    if ( !$(e.target).closest("#btn_side").length && $btn_side.data('toggle_enable') ){
        remove_side_data();
    }
})

여기서, 조건에 해당하는 두 값을 한번 찍어 보세요.

즉, remove_side_data() 를 타는지 확인해 보세요.

$(e.target).closest("#btn_side").length
$btn_side.data('toggle_enable')

이 두 값을 찍어 보세요. alert 해 보세요.

$(e.target).closest("#btn_side").length 는 0
$btn_side.data('toggle_enable') 는 true
가 나와야 합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 128
© SIRSOFT
현재 페이지 제일 처음으로