0
因此，對於我的投資組合，我有一個縮略圖庫，當您點擊縮略圖時，您將獲得全屏預覽。我還設置了我的代碼，以便當您單擊圖像時，「菜單」按鈕以及縮略圖庫都會消失。 單擊圖像時元素消失，但當我退出全屏預覽時，元素不會重新出現，它們仍然消失。如何在關閉後重新顯示元素？ （jquery）
我的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 -->我如何和名爲.gallery再次.burger似乎回來時，我關閉窗口？謝謝！
請分享的jsfiddle – Ayush
關閉按鈕從來不'$（ 「畫廊，.burger」）。顯示（）' – Barmar
如果是點擊圖片上的代碼？你有兩個處理程序用於點擊'.gallery ul li a'，我猜是縮略圖。 – Barmar