테스트 사이트 - 개발 중인 베타 버전입니다

스크립트 관련 채택완료

웹프리죤 5년 전 조회 2,232

전체메뉴가 열린상태에서 특정요소들 제외하고 클릭하면 닫히게 해놨는데요

질문드릴것은 .panel 이란 전체메뉴가 뜨는데 .panel 만 셀렉터로 잡으니 그안에 요소들까지 인식을

못해서 각각 다 잡아놨는데 .panel 하나만 셀렉트 하면 자식들까지 다 포함되게끔은 어떻게 해야할까요

레이아웃상 .item 안에 공간 클릭하면 닫혀버리더라구요 .panel 로 잡으면 그 안에 공간 어딜 클릭해도 

닫히면 안되는데요..

 

     

            

                     ..........

           

     

 

</p>

<p>$('body').on('click', function(e){

        var $tgPoint = $(e.target);

        var $area1 = $tgPoint.hasClass('depth-1')

        var $area2 = $tgPoint.hasClass('panel')

        var $area3 = $tgPoint.hasClass('panel-col')

        var $area4 = $tgPoint.hasClass('item')

        var $area5 = $tgPoint.hasClass('s-area')</p>

<p>        if (!$area1 && !$area2 && !$area3 && !$area4 && !$area5) {

            $('#gnb .panel').hide();

        }

    });</p>

<p>

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

답변 2개

채택된 답변
+20 포인트
플래토
5년 전

$('#gnb .panel').toggle();<

 

을 사용하면 안될까요?

 

그리고 이벤트를 body 태그에 걸어놓은셨네요

 

$(function() {

    $(".panel").click(function() {

        $('#gnb .panel').toggle();

    });

});

형태로 해보시는게..

로그인 후 평가할 수 있습니다

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

panel 내부요소들도 panel 안에 속해있기때문에

사실상 panel만 클릭해도 명령을 먹어야하는게 맞습니다

 

개발자도구로 panel이 내부요소들으 포함하고있는지 확인해보세요

예를들어 내부요소들이 float로 정렬됐을경우

panel이 정상적으로 영역을 못잡고있을수있습니다

로그인 후 평가할 수 있습니다

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

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

로그인