드롭다운쓰는데 여백클릭시 닫히게 하려면

헛둘헛둘 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.05.14 17:36:15 1168 (123.♡.♡.183)

답변 2

본문

현재 드롭다운버튼을 쓰고 있는데요

버튼 누르면~~ 내용이 나오고

버튼을 다시 누르면~~ 내용이 닫히고 있거든요..(꼭 버튼을 눌러야지만 작동)

sir 전체보기 누르면 메뉴가 드롭다운으로 나오고 여백을 눌러도 고정되어있는 반면에

다시 전체보기를 누르면 닫히고 있고요!

저는...버튼을 눌러도 닫히지만

여백부분을 클릭해도 닫히게 하고 싶거든요...

그런데..이런걸 분명 예전에 봤었는데......뭐라고 하는지 명칭도 잘모르겠고

그러다보니 검색도 잘 안되고 있어서..

팁이나 조언이 좀 있다면 감사드리겠습니다~

#영카트5

답변 2

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-05-14 18:41:44 119.♡.♡.81

버튼 엘리먼트와 메뉴 엘리먼트 보다 상위 노드에 이벤트 핸들러를 등록하는 방법이 있습니다.


<style>
#menu_viewall {
    background-color: silver;
    display: none;
}
</style>
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
    // --------------------------------- control by button only
    // $('#btn_viewall').click(function () {
    //     $('#menu_viewall').toggle();
    // });
 
    // --------------------------------- control by any element
    $(document).click(function (evt) {
        var is_btn_viewall = $(evt.target).closest('#btn_viewall').length;
        var is_menu_viewall = $(evt.target).closest('#menu_viewall').length;
        if (is_btn_viewall > 0) {
            $('#menu_viewall').toggle();
        } else if (is_menu_viewall == 0) {
            $('#menu_viewall').hide();
        }
    });
});
</script>
 
<button id="btn_viewall">전체보기</button>
<ul id="menu_viewall">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>