토글 닫기가 안됩니다. 도와주세요 ㅠㅠ
본문
ㅠㅠ 메인에서는 토글을 눌렀을때 열기만 되고 닫히지는 않습니다.
그러나 서브에서는 열기 닫기 모두 정상으로 작동합니다. 무엇이 문제일까요?
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
이런 질문은 실제 사이트를 보여 주시는 것이 좋습니다.
개발자 도구나 요소 검사 등에서 에러가 나는지 확인해 볼 수 있습니다.
http://kad.four-1.com/ 이 사이트입니다 ㅠㅠ 도와주십시오...
사이드메뉴 스크립트 중에
$(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
가 나와야 합니다.
서브에서는 올바로 작동해서 메인에 뭐가 문제인지 하나씩 지워보니
라테스트 스킨과 충돌이 되는것 같습니다. 라테스트를 지우니 메인에서도 닫기 버튼이 작동합니다!
답변을 작성하시기 전에 로그인 해주세요.
