隱藏div點擊外面

Question

我想隱藏hidden的 class div。 當用戶點擊 div 外部時， hidden的 div 應該是滑出的。

HTML

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

CSS

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

JS

$(document).ready(function () {
    $('#slide').click(function () {
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
    });
});

提前致謝！

Answer 1

你可以你這個代碼。 您可以定義頁面的哪些元素可以隱藏您的面板。 我在這里選擇left ， right和clear類：

 $(document).ready(function () { $('#slide').click(function () { hide_el (); }); $('.left, .right, .clear').click(()=>{ var hidden = $('.hidden'); if (hidden.hasClass('visible')) { hidden.animate({ "left": "-1000px" }, "slow").removeClass('visible'); } }); }); function hide_el (){ var hidden = $('.hidden'); if (hidden.hasClass('visible')) { hidden.animate({ "left": "-1000px" }, "slow").removeClass('visible'); } else { hidden.animate({ "left": "0px" }, "slow").addClass('visible'); } }

 .left, .hidden { float: left; height: 350px; }.left { width: 50%; background: #fff; z-index: 1; }.hidden { width: 25%; z-index: 2; position: absolute; left: -1000px; background: #f90; color: #000; }.right { width: 50%; float: right; height: 350px; background: #000; color: #fff; }.clear { clear: both; }

 <:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="hidden">Here I am !</div> <div class="left">Left panel</div> <div class="right">Right panel</div> <div class="clear"></div> <a href="#" id="slide">Show/hide Slide Panel</a> </body> </html>

如果您需要點擊正文，請使用以下代碼：

 $(document).ready(function () { $('#slide').click(function () { hide_el (); }); }); function body_click(){ setTimeout(()=>{ var hidden = $('.hidden'); $('body').click( function(event) { if( $(event.target).closest(hidden).length === 0 ) { if (hidden.hasClass('visible')) { hidden.animate({ "left": "-1000px" }, "slow").removeClass('visible'); }; } }); }, 1000); } function hide_el (){ $('body').unbind('click'); var hidden = $('.hidden'); if (hidden.hasClass('visible')) { hidden.animate({ "left": "-1000px" }, "slow").removeClass('visible'); } else { hidden.animate({ "left": "0px" }, "slow").addClass('visible'); body_click(); } }

 body { height: 300px; }.left, .hidden { float: left; height: 350px; }.left { width: 50%; background: #fff; z-index: 1; }.hidden { width: 25%; z-index: 2; position: absolute; left: -1000px; background: #f90; color: #000; }.right { width: 50%; float: right; height: 350px; background: #000; color: #fff; }.clear { clear: both; }

 <:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="hidden">Here I am !</div> <div class="left">Left panel</div> <div class="right">Right panel</div> <div class="clear"></div> <a href="#" id="slide">Show/hide Slide Panel</a> </body> </html>

Answer 2

以下代碼檢查您是否在該元素的后代的目標元素內單擊。 如果不是，將運行所需的代碼。 我沒有添加 animation 位，僅此而已。 這是小提琴https://jsfiddle.net/jhe36dmb/1/

$(document).mouseup(function (e)
 {
    var container = $('.hidden');

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {

      $('.hidden').css('left', '0');
    }
});

隱藏div點擊外面

問題描述

2 個解決方案

解決方案1
1 已采納 2019-11-07 13:37:12

解決方案2
0 2019-11-07 13:33:20

隱藏div點擊外面

問題描述

2 個解決方案

解決方案1 1 已采納 2019-11-07 13:37:12

解決方案2 0 2019-11-07 13:33:20

解決方案1
1 已采納 2019-11-07 13:37:12

解決方案2
0 2019-11-07 13:33:20