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