[초보] body 클릭 시 창(메시지 팝업) 닫기 채택완료

</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></p>

<p><div class="member_wrap after float_r">

            <div class="message po_rel">

                <div class="bell new"><!-- 새로운 메시지 있을 때는 new 클래스 -->

                    <img src="/fontawesome/svgs/solid/bell.svg" alt="">

                </div>

                <div class="message_list"> <!-- 이게 .bell을 클릭하면 나오는 메시지 목록 창입니다. -->

                    <ul>

                        <li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>

                        <li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>

                        <li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>

                        <li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>

                        <li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>

                        <li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>

                    </ul>

                </div>

            </div>

        </div>

        

        <script>

            // $(".message .bell").click(function(){

            //     $(".message_list").slideToggle(100).toggleClass('open');

            // });

            $('body').on('click', function(evt){

                var obj_target = $(evt.target).closest('.message .bell').get(0);

                if (obj_target !== undefined) {

                    $(".message_list").slideToggle(100).toggleClass('open');

                } else {

                    // var has_open = $(".message_list").hasClass('open');

                    var has_open = $(".message_list").css('display') != 'none';

                    if (has_open == true) {

                        $(".message_list").slideToggle(100).removeClass('open');

                    }

                }

            });

        </script></p>

<p>