我是javascript的新手。
我想点击.direction
点击.lightboxbg
和.directionslightbox
。
点击.lightboxbg
后,我希望.lightboxbg
和.directionslightbox
淡出。
我还想确保我的.lightboxbg
和.directionslightbox
在我的.contactlist
隐藏时消失,但在淡出时再次显示。
我的HTML:
<div class="contactmenu">
<nav>
<ul class= "contactlist">
<li style="background-image:url('directions.png');" class="directions">
</li>
<li style="background-image:url('callicon.png');" class="">
<a href="tel:+44(0)1392495573"></a>
</li>
<li style="background-image:url('email.png');" class="">
<a href="mailto:matt050681@gmail.com"></a>
</li>
</ul>
</nav>
</div>
<div class="lightboxbg"></div>
<div class="directionslightbox"></div>
我的CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
我现在的JS:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.directions').click(function() {
$('.lightboxbg, .directionslightbox').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .directionslightbox').fadeOut(800);
});
});
</script>
任何帮助都会受到赞赏,我已经坚持了很久。
答案 0 :(得分:1)
$(document).ready(function(){
$(document).on("click",".directions", function() {
$('.lightboxbg, .directionslightbox').fadeIn(800);
$('.contactlist').fadeOut("slow");
});
$(document).on("click",".lightboxbg", function() {
$('.lightboxbg, .directionslightbox').fadeOut(800);
$('.contactlist').fadeIn("slow");
});
});