ㅠㅠ 메인에서는 토글을 눌렀을때 열기만 되고 닫히지는 않습니다.
그러나 서브에서는 열기 닫기 모두 정상으로 작동합니다. 무엇이 문제일까요?
html 구조는 이렇습니다
Copy
<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>그리고 쿼리는 이렇습니다
Copy
//사이드 메뉴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개 / 댓글 5개
채택된 답변
+20 포인트
2017-02-14 (화) 18:59:04
이런 질문은 실제 사이트를 보여 주시는 것이 좋습니다.
개발자 도구나 요소 검사 등에서 에러가 나는지 확인해 볼 수 있습니다.
답변에 대한 댓글 5개
2017-02-15 (수) 14:15:51
사이드메뉴 스크립트 중에
$(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() 를 타는지 확인해 보세요.
$(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() 를 타는지 확인해 보세요.
2017-02-15 (수) 15:22:51
$(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
가 나와야 합니다.
$btn_side.data('toggle_enable')
이 두 값을 찍어 보세요. alert 해 보세요.
$(e.target).closest("#btn_side").length 는 0
$btn_side.data('toggle_enable') 는 true
가 나와야 합니다.
2017-02-15 (수) 16:46:28
서브에서는 올바로 작동해서 메인에 뭐가 문제인지 하나씩 지워보니
라테스트 스킨과 충돌이 되는것 같습니다. 라테스트를 지우니 메인에서도 닫기 버튼이 작동합니다!
라테스트 스킨과 충돌이 되는것 같습니다. 라테스트를 지우니 메인에서도 닫기 버튼이 작동합니다!
답변을 작성하려면 로그인이 필요합니다.