jquery实现点击空白处div消失

    <div class="wrap">
        <input type="text" value="点击显示/空白隐藏" />
        <div class="box">
            111111111111<br>
            111111111111<br>
            111111111111<br>
            111111111111<br>
            111111111111<br>
        </div>        
    </div>

    <style>
        input{
            width: 180px;
            height: 30px;
        }
        .wrap{
            position: relative;
            margin: 300px;
        }
        .box{
            display: none;
            width: 182px;
            max-height: 200px;
            position: absolute;
            top: 35px;
            left: 0;
            border: 1px solid #999;
        }
    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


    <script>
        $('input').click(function() {
            $('.box').slideDown();
        });

        $(document).click(function(event){
            var _con = $('input');
            // 如果点击目标不是input，弹框消失
            if( !_con.is(event.target) ){
               $('.box').slideUp('slow');
            }
       });
    </script>

 

转载于:https://www.cnblogs.com/yc-web/p/9729238.html