드롭다운쓰는데 여백클릭시 닫히게 하려면 채택완료
현재 드롭다운버튼을 쓰고 있는데요
버튼 누르면~~ 내용이 나오고
버튼을 다시 누르면~~ 내용이 닫히고 있거든요..(꼭 버튼을 눌러야지만 작동)
sir 전체보기 누르면 메뉴가 드롭다운으로 나오고 여백을 눌러도 고정되어있는 반면에
다시 전체보기를 누르면 닫히고 있고요!
저는...버튼을 눌러도 닫히지만
여백부분을 클릭해도 닫히게 하고 싶거든요...
그런데..이런걸 분명 예전에 봤었는데......뭐라고 하는지 명칭도 잘모르겠고
그러다보니 검색도 잘 안되고 있어서..
팁이나 조언이 좀 있다면 감사드리겠습니다~
답변 2개
버튼 엘리먼트와 메뉴 엘리먼트 보다 상위 노드에 이벤트 핸들러를 등록하는 방법이 있습니다.
</p>
<p><style>
#menu_viewall {
background-color: silver;
display: none;
}
</style></p>
<p> </p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<script>
$(function () {</p>
<p> // --------------------------------- control by button only
// $('#btn_viewall').click(function () {
// $('#menu_viewall').toggle();
// });</p>
<p> </p>
<p> // --------------------------------- control by any element</p>
<p> $(document).click(function (evt) {
var is_btn_viewall = $(evt.target).closest('#btn_viewall').length;
var is_menu_viewall = $(evt.target).closest('#menu_viewall').length;</p>
<p> if (is_btn_viewall > 0) {
$('#menu_viewall').toggle();
} else if (is_menu_viewall == 0) {
$('#menu_viewall').hide();
}
});
});
</script></p>
<p> </p>
<p><button id="btn_viewall">전체보기</button>
<ul id="menu_viewall">
<li>1</li>
<li>2</li>
<li>3</li>
</ul></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
베르만님처럼 하는 방법도 있고
드롭다운 상위에 backgrund 로 쓸 div 를 하나 더 로드합니다.
<div>
<div>드롭다운</div>
</div>
이런 형태겠죠.
첫번째 div 에 20% 정도의 black 컬러를 주고
첫번째 div 클릭시 hide 를 주면됩니다.
이때 두번째 div 범위는 제외해야 하므로 stopPropagation 도 함께 적용합니다.
<div onclick="$(this).fadeOut();">
<div onclick="event.stopPropagation();">
내용
</div>
</div>
간단하게 인라인 처리하면 이렇게 되겠네요.
답변에 대한 댓글 1개
늘 감사한 마음 가지고 있어요~ 오늘 하루도 평안한 하루 보내시길
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인