显示我的页面加载时的容器

Question

加载页面后，将加载“ .lightbox-prev，.lightbox-next”容器，但是我只希望在单击“ .lightbox-trigger”时显示它们。

我的HTML：

<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></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;
}
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    background: center no-repeat red;
    z-index: 1001;
    cursor: pointer;
}
.lightbox-prev {
    left: 0;
    background-image: url("../previous.png");
}
.lightbox-next {
    right: 0;
    background-image: url("../next.png");
}

我的JS：

<script type="text/javascript">
  var lightboxcounter;

  $(document).ready(function(){

      $('.lightbox-trigger').click(function() {
          lightboxcounter = $(this).attr('data-counter');
          var image = $(this).attr('data-img')
          $('.lightbox').css('background-image', 'url(' + image + ')');

          $('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
      });

      $('.lightboxbg').click(function() {
          $('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
      });

      $('.lightbox-prev').click(function() {
          lightboxcounter--;
          $('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
      });
      $('.lightbox-next').click(function() {
          lightboxcounter++;
          console.log(lightboxcounter);
          $('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
      });



  });

</script>

如果有人可以提供帮助，我将不胜感激，这整天困扰着我！ 干杯

Answer 1

您已经在使用fadeIn来显示控件，因此您所需要做的就是最初隐藏它们。 将此添加到您的CSS ...

.lightbox-prev, .lightbox-next {
    display: none;
}