스크립트 질문드립니다.
본문
안녕하세요
아래처럼 반응형 메뉴를 사용중입니다.
PC버전에서 메뉴를 클릭해도 링크가 안넘어가고
모바일버전에서도 메뉴를 클릭해도 링크가 안됩니다. ㅠ
그래서..
스크립트에서
$("a").click(function(e){
e.preventDefault();
})
이 부분을 지우면 PC버전에서는 클릭이 되는데
모바일에서는 클릭을 하는순간 창이 닫히면서 다른 화면으로 넘어가더라구요..
도통 어느 부분을 만저야 해결이 될지 몰르겠어서 고수님들에게 도움요청해봅니다 ㅠ
아래는 소스 입니다.
<script>
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
})
$(".header .header_wrap .gnb ul li a").hover(function(){
$(this).addClass("hover")
$(".header .submenu").addClass("hover")
},function(){
$(".header .header_wrap .gnb ul li a").removeClass("hover")
$(".header .submenu").removeClass("hover")
})
$(".header .submenu").hover(function(){
$(".header .submenu").addClass("hover")
},function(){
$(".header .submenu").removeClass("hover")
})
$(".header .submenu .submenu_wrap ul").hover(function(){
let idx=$(this).index()
$(".header .header_wrap .gnb ul li").eq(idx).find("a").addClass("hover")
},function(){
$(".header .header_wrap .gnb ul li a").removeClass("hover")
})
$(window).resize(function(){
if(window.innerWidth>1200){
$(".header .header_wrap .menu_icon").removeClass("action")
$(".bg").css("display","none")
$(".mobile_menu").css("right","-80%")
}else{
}
}).resize();
$(".mobile_menu> ul > li").click(function(){
$(this).find("ul").toggleClass("click")
$(this).find("a").toggleClass("click")
})
$(".header .header_wrap .menu_icon").click(function(){
$(this).toggleClass("action")
if($(this).hasClass("action")==true){
$(".mobile_menu").css("right","0")
$(".bg").css("display","block")
}else{
$(".mobile_menu").css("right","")
$(".bg").css("display","none")
}
})
</script>
<div class="header">
<div class="header_wrap">
<div class="gnb">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
</ul>
</div>
</div>
<div class="submenu">
<div class="submenu_wrap">
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</div>
</div>
<div class="mobile_menu">
<ul>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
</ul>
</div>
</div>
답변 1
크롬 개발자 도구를 통해 PC일때와 모바일 일때의 기준을 소스로 직접 보시는것이 가장 빠르게 해결할수 있는 방법일겁니다.
크롬에서 F12 눌러 PC버전과 Mobile 버전일때 두가지로 해당 영역이 어떤 스크립트를 타는지 확인해보세요
답변을 작성하시기 전에 로그인 해주세요.
