我想隐藏 hidden 类 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');
}
});
});
提前致谢!
最佳答案
您可以使用此代码。您可以定义页面的哪些元素可以隐藏您的面板。我在这里选择 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>关于javascript - 隐藏div点击外面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58749318/