스크립트 관련
본문
전체메뉴가 열린상태에서 특정요소들 제외하고 클릭하면 닫히게 해놨는데요
질문드릴것은 .panel 이란 전체메뉴가 뜨는데 .panel 만 셀렉터로 잡으니 그안에 요소들까지 인식을
못해서 각각 다 잡아놨는데 .panel 하나만 셀렉트 하면 자식들까지 다 포함되게끔은 어떻게 해야할까요
레이아웃상 .item 안에 공간 클릭하면 닫혀버리더라구요 .panel 로 잡으면 그 안에 공간 어딜 클릭해도
닫히면 안되는데요..
<div class="panel">
<div class="panel-col">
<div class="item">
..........
</div>
</div>
</div>
$('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')
if (!$area1 && !$area2 && !$area3 && !$area4 && !$area5) {
$('#gnb .panel').hide();
}
});
답변 2
$('#gnb .panel').toggle();<
을 사용하면 안될까요?
그리고 이벤트를 body 태그에 걸어놓은셨네요
$(function() {
$(".panel").click(function() {
$('#gnb .panel').toggle();
});
});
형태로 해보시는게..
panel 내부요소들도 panel 안에 속해있기때문에
사실상 panel만 클릭해도 명령을 먹어야하는게 맞습니다
개발자도구로 panel이 내부요소들으 포함하고있는지 확인해보세요
예를들어 내부요소들이 float로 정렬됐을경우
panel이 정상적으로 영역을 못잡고있을수있습니다
답변을 작성하시기 전에 로그인 해주세요.
