关闭后如何重新显示元素？ （jquery的）

时间：2015-07-11 19:22:10

标签： jquery image toggle gallery

因此，对于我的投资组合，我有一个缩略图库，当您点击缩略图时，您将获得全屏预览。我还设置了我的代码，这样当您点击图片时，“菜单”就会被设置为＆＃39;按钮消失以及缩略图库。 单击图像时元素消失，但当我退出全屏预览时，元素不会重新出现，它们仍然消失。

我的js：

＆＃13;
＆＃13; 
$('.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();
});
＆＃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;
＆＃13;
＆＃13;

当我关闭窗户时，如何让.gallery和.burger再次出现？谢谢！

1 个答案:

答案 0 :(得分：1)

.close点击处理程序需要显示点击缩略图时隐藏的元素。

＆＃13;
＆＃13; 
$('.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;
＆＃13;
＆＃13;

相关问题
最新问题