a 태그가 안먹힐 땐 어떻게 해야할까요
본문
안녕하세요, 그누보드 무료 스킨을 사용중인데요~!
모바일 접속 혹은 창크기를 줄이면 상단 오른쪽에 모바일 메뉴가 나타납니다.
클릭하면 HOME 부터 메뉴들이 나오는데
2차메뉴가 있을 경우에는 링크이동이 잘 되는데
2차메뉴가 없는 HOME 메뉴의 경우 클릭시 먹통이어서요ㅜㅜ
마우스 올리면 포인터로 바뀌면서 링크가 뜨긴뜨는데 클릭이 전혀 먹히지 않네요ㅜ
아래 소스 첨부합니다! 혹시 봐주실수 있을까요.
감사합니다.
<div id="aside">
<div class="close_menu" id="mobile_menu_close">
<span class="close-line1"></span>
<span class="close-line2"></span>
</div>
<div class="mobile_menu">
<ul>
<?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="mobile-list" 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'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<ul class="mb-sub-ul">'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?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>
</div>
<div class="mask"></div>
<script type="text/javascript">
$( document ).ready(function(){
$(function () {
$('.mobile_menu > ul > li > a').click(function () {
$( this ).parent().find('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
$('.mobile_menu > ul > li > a').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
$( "#mb-open-menu" ).click(function(){
$( "#aside" ).animate({"left":"0px"}, 200);
$( ".mask" ).css('display','block');
$( ".close_menu" ).animate({"left":"81%"}, 200);
$("body").css("position","fixed");
});
$( "#mobile_menu_close, .mask" ).click(function(){
$( "#aside" ).animate({"left":"-100%"}, 200);
$( ".close_menu" ).animate({"left":"-100%"}, 200);
$( ".mask" ).css('display','none');
$("body").css("position","relative");
});
});
</script>
</div>
답변 3
$('.mobile_menu > ul > li > a').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
이 부분을 보면
a링크의 클릭 트리거를 발생시키도록 되어있는데, Home 버튼에는 a링크의 주소가 없으니 이동하지 않는게 아닐까요?
그리고 a링크를 클릭했을 때 이벤트 자체가 발생하는지 아예 클릭이 인식조차도 안되는건지를 체크하려면
$(this).trigger('click'); 위에 콘솔 로그를 아무거나 찍어봐서 이벤트가 발생하는지 우선 체크부터 해보시면 됩니다.
그리고 a링크에 걸린 기능이 두개 다 클릭했을 때 발생하는 기능인데 click과 touchstart로 나누기 보다는 그냥 click으로만 통합해서 사용하는게 더 적합해 보이고, a링크를 클릭했을 때 this 의 href 값이 있으면 링크로 이동, 아니면 메뉴 슬라이드로 구분하는게 나을거 같습니다.
e.preventDefault(); 이게 있어서 안먹히는거 아닌가요?
관리자모드 -> 메뉴설정에서 링크값 확인해보셔야 할거 같습니다.
눌러보니 # 으로 값 받아오는거 보니 링크값 문제인것 같습니다.