I want to hide the hidden
class div. When user will click on the outside of the div hidden
div should be slide-out.
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');
}
});
});
Thanks in advance!
You can you this code. And you can define which elements of your page could hide your panel. I choose left
, right
and clear
classes here:
$(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>
If you need body click then use this code:
$(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>
The following code checks if you're clicking inside the target element of a descendent of that element. If not the desired code will run. I didn't add in the animation bits, that's all you. Here's the fiddle 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');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.