<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<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>