点击页面其它地方关闭弹出层

$(".statusoption").click(function () {
        $(this).children().toggle();
    })
    $('body').click(function(e) {
        if(e.target.type != 'button')
            if ( $('.tipse').is(':visible') ) {
                $('.tipse').hide();
            }
    })

 

<style>
.tipse{position: absolute;z-index: 55; padding-top: 20px; display: none; cursor: auto; top: 35px; right: 13px; width: 300px; font-size: 11px !important; text-align: left; border: 1px solid #5c4ff4; background-color:#ffffff}
.layui-text{ font-size: 12px; line-height: 16px;}
.layui-timeline-item{ padding-bottom:15px;}
.layui-timeline-item:first-child{ padding-bottom: 20px;}
</style>

<button type="button" class="btn btn-sm btn-outline-primary statusoption" style="position: relative;">已达到
                                <div class="row tipse">
                                    <div class="col-md-12">
                                        <ul class="layui-timeline">
                                            {volist name='val.jianlikuoption' id='v'}
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h4 class="layui-timeline-title">{$v.clname} <span style="float: right;color: #b3b3b3">{$v.cl_time|date='Y-m-d H:i:s',###}</span></h4>
                                                        <span>{$v.cl_desc}</span>
                                                    </div>
                                                </li>
                                            {/volist}
                                         </ul>
                                    </div>
                                </div>
                            </button>