show hide에서 바탕화면을 찍어도 닫히게 하는 방법이 있을까요?

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

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

2023.04.04 21:05:57 774 (123.♡.♡.183)

답변 1

본문

버튼을 클릭하면 내용이 보여지고

버튼을 다시 클릭하면 내용이 사라지는 show() / hide() 를 지금 쓰고 있어요

1.우선 버튼을 만들때 클래스를 줬고, 닫기는 display:none으로 처음에는 안보이게 했고


<button type="button" class="all_open">전체보기</button> 
<button type="button" class="all_close" style="display:none">전체닫기</button>

2.내용 들어가는곳은 id로 설정을 잡고 첨에는 안보이게 설정했고..


<div id="content"  style="display:none">
내용
</div>

3. 스크립트 부분은 버튼을 클릭했을때 보여지고, 다시 재 클릭했을때 감춰지는걸 설정을 했는데요


        <script>
        $(document).ready(function(){
            $(".all_open").click(function(){
                $(".all_close").show();
                $(".all_open").hide();
                $( '#content' ).toggle();
            });
            $("all_close").click(function(){
                $(".all_open").show();
                $(".all_close").hide();
                $( '#content' ).toggle();
            });
        });
        </script>

거의 정석대로 했다고 보시면 되는데...

여기서 버튼으로 닫는거 말고도....내용이 켜져있을때 바탕화면 아무곳이나 찍을때 닫히게 하려면

어떤식으로 스크립트를 써줘야할까요..

초보라서 검색을 해도 찾기가 어려운데..

마음같아선

div를 기준으로

div id="content 가 아닌곳을 찍게되면 닫히게 하는걸 추가하면 가능할거 같은데..

쌩초보라..어려움이 많아서 조언을 좀 얻어볼까 하고 글을 남겨봅니다