스크립트 질문드립니다.

그누배우자

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-07-10 (월) 16:54:17 1,671

안녕하세요

아래처럼 반응형 메뉴를 사용중입니다.

PC버전에서 메뉴를 클릭해도 링크가 안넘어가고

모바일버전에서도 메뉴를 클릭해도 링크가 안됩니다. ㅠ

그래서..

스크립트에서

$("a").click(function(e){
e.preventDefault();
})

이 부분을 지우면 PC버전에서는 클릭이 되는데

모바일에서는 클릭을 하는순간 창이 닫히면서 다른 화면으로 넘어가더라구요..

도통 어느 부분을 만저야 해결이 될지 몰르겠어서 고수님들에게 도움요청해봅니다 ㅠ

아래는 소스 입니다.

Copy

<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>

그누보드5 php

답변 1개

채택된 답변

+20 포인트

toqurk

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-07-10 (월) 17:34:00

크롬 개발자 도구를 통해 PC일때와 모바일 일때의 기준을 소스로 직접 보시는것이 가장 빠르게 해결할수 있는 방법일겁니다.

크롬에서 F12 눌러 PC버전과 Mobile 버전일때 두가지로 해당 영역이 어떤 스크립트를 타는지 확인해보세요

답변을 작성하려면 로그인이 필요합니다.

스크립트 질문드립니다.

답변 1개

공유하기