因此,对于我的投资组合,我有一个缩略图库,当您点击缩略图时,您将获得全屏预览。我还设置了我的代码,这样当您点击图片时,“菜单”就会被设置为'按钮消失以及缩略图库。 单击图像时元素消失,但当我退出全屏预览时,元素不会重新出现,它们仍然消失。
我的js:
$('.gallery ul li a').click(function() {
var itemID = $(this).attr('href');
$('.gallery ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery ul').removeClass('item_open');
return false;
});
$(".gallery ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
//ELEMENTS THAT I'M HIDING WHEN I CLICK A GALLERY THUMBNAIL//
$(".gallery").hide();
$(".burger").hide();
$(".close").show();
});

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
clear: both;
}
.row img {
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
// z-index: 1000;
position: static;
}
.gallery ul li {
float: left;
margin: 0 0.87719%;
}
.gallery {
margin: 0 auto;
overflow: hidden;
padding-right: 60px;
}
.gallery ul {
padding-top: 100px;
position: relative;
}
.gallery ul li {
margin-bottom: 20px;
width: 23.24561%;
position: relative;
list-style: none;
}
.gallery ul li a {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
.gallery ul li a:before {
position: absolute;
width: 32px;
height: 32px;
top: 40%;
left: 50%;
margin: -14px 0 0 -16px;
background: url('http://i58.tinypic.com/aowbw8.png') no-repeat;
content: "";
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.gallery ul li a:hover:before {
top: 50%;
opacity: 1;
}
.gallery ul li a:after {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
content: "";
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.gallery ul li a:hover:after {
opacity: 1;
}
.port {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding-top: 100px;
z-index: 1000;
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.port img {
width: 50%;
}
.port .description {
float: left;
width: 50%;
max-height: 100%;
padding: 0 40px 40px;
overflow: auto;
font-family: 'lato';
font-size: 20px;
color: #ffffff;
}
.port h1 {
font-size: 35px;
color: #fbe2d4;
background: url("http://www.julie-lavergne.com/img/common/trame.png");
padding: 15px;
}
.port > * {
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.port.item_open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.port > * {
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.close {
width: 100px;
height: 100px;
background: url("http://i57.tinypic.com/6e15lj.png") no-repeat center;
left: 2%;
top: 10%;
opacity: 1;
z-index: 1000;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
position: absolute;
content: 'close';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="gallery">
<div class="row">
<ul>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</li>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
</ul>
</div>
<!-- / row -->
</section>
</div>
<!-- Item 01 -->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h1>Item 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</div>
</div>
<!-- / row -->
</div>
<!-- / Item 02 -->
<!-- Item 02 -->
<div id="item02" class="port">
<div class="row">
<div class="description">
<h1>Item 02</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
<div class="close"></div>
</div>
<!-- / row -->
</div>
<!-- / Item 02 -->
&#13;
当我关闭窗户时,如何让.gallery和.burger再次出现?谢谢!
答案 0 :(得分:1)
.close
点击处理程序需要显示点击缩略图时隐藏的元素。
$('.gallery ul li a').click(function() {
var itemID = $(this).attr('href');
$('.gallery ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery ul').removeClass('item_open');
// Show the elements that were hidden when clicking on the thumbnail
$('.gallery, .burger').show();
$('.close').hide();
return false;
});
$(".gallery ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
//ELEMENTS THAT I'M HIDING WHEN I CLICK A GALLERY THUMBNAIL//
$(".gallery").hide();
$(".burger").hide();
$(".close").show();
});
&#13;
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
clear: both;
}
.row img {
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
// z-index: 1000;
position: static;
}
.gallery ul li {
float: left;
margin: 0 0.87719%;
}
.gallery {
margin: 0 auto;
overflow: hidden;
padding-right: 60px;
}
.gallery ul {
padding-top: 100px;
position: relative;
}
.gallery ul li {
margin-bottom: 20px;
width: 23.24561%;
position: relative;
list-style: none;
}
.gallery ul li a {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
.gallery ul li a:before {
position: absolute;
width: 32px;
height: 32px;
top: 40%;
left: 50%;
margin: -14px 0 0 -16px;
background: url('http://i58.tinypic.com/aowbw8.png') no-repeat;
content: "";
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.gallery ul li a:hover:before {
top: 50%;
opacity: 1;
}
.gallery ul li a:after {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
content: "";
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.gallery ul li a:hover:after {
opacity: 1;
}
.port {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding-top: 100px;
z-index: 1000;
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.port img {
width: 50%;
}
.port .description {
float: left;
width: 50%;
max-height: 100%;
padding: 0 40px 40px;
overflow: auto;
font-family: 'lato';
font-size: 20px;
color: #ffffff;
}
.port h1 {
font-size: 35px;
color: #fbe2d4;
background: url("http://www.julie-lavergne.com/img/common/trame.png");
padding: 15px;
}
.port > * {
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.port.item_open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.port > * {
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.close {
width: 100px;
height: 100px;
background: url("http://i57.tinypic.com/6e15lj.png") no-repeat center;
left: 2%;
top: 10%;
opacity: 1;
z-index: 1000;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
position: absolute;
content: 'close';
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="gallery">
<div class="row">
<ul>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</li>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
</ul>
</div>
<!-- / row -->
</section>
</div>
<!-- Item 01 -->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h1>Item 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</div>
</div>
<!-- / row -->
</div>
<!-- / Item 02 -->
<!-- Item 02 -->
<div id="item02" class="port">
<div class="row">
<div class="description">
<h1>Item 02</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
<div class="close"></div>
</div>
<!-- / row -->
</div>
<!-- / Item 02 -->
&#13;