頁面剛開始刷新時，是顯示的；
點擊左側按鈕、其他區域或右側關閉按鈕都可以使其隱藏，再點擊左側按鈕顯示；

注：先引入jQuery版本
JS

<script type="text/javascript">$(function() {$('.showBtn').click(function(event) {//取消事件冒泡 event.stopPropagation();//按鈕的toggle,如果div是可見的,點擊按鈕切換為隱藏的;如果是隱藏的,切換為可見的。 $('.showMain').toggleClass('hide');return false;});$('.closeBtn').click(function(event) {//取消事件冒泡 event.stopPropagation();//按鈕的toggle,如果div是可見的,點擊按鈕切換為隱藏的;如果是隱藏的,切換為可見的。 $('.showMain').toggleClass('hide');return false;});//點擊空白處隱藏彈出層，下面為滑動消失效果和淡出消失效果。$(document).click(function(event) {var _con = $('.showMain'); // 設置目標區域if(!_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1//$('#divTop').slideUp('slow'); //滑動消失//$('.showMain').hide(1000); //淡出消失$('.showMain').addClass('hide');}});}) </script>

CSS

.showBtn {height: 220px;width: 60px;background-color: #f3f3f3;text-align: center;padding-top: 90px;box-sizing: border-box;position: fixed;left: 8px;bottom: 8px;z-index: 3; } .showBtn:hover {cursor: pointer; } .showMain {height: 200px;overflow: hidden;width: 100%;position: fixed;bottom: 0;left: 0;z-index: 1111111;transition: all 0.5s;animation: showMainMove 0.5s; } @keyframes showMainMove {from {left: -2000px;}to {left: 0;} } .showMain.hide {left: -2000px; } .showMain.show {left: 0px; } .showMain img {width: 100%;height: auto;opacity: 0.8; } .closeBtn{font-size: 30px;height: 50px;width: 50px;line-height: 50px;text-align: center;position: absolute;bottom: 140px;right: 50px;border: 1px solid #666;border-radius: 50%; } .closeBtn:hover{cursor: pointer; }

HTML

<div class="wrap"><div class="showBtn">點擊顯示隱藏</div><div class="showMain"><img src="qqq.jpg" alt="" /><div class="closeBtn">X</div></div> </div>

如有錯誤或不足，歡迎各位大佬評論指正。

總結

以上是生活随笔為你收集整理的js实现点击div以外区域，隐藏div区域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。