如何通过单击图像来切换侧栏？

Question

<style>    
div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 40%;
height: auto;
padding-top: 5px;
}

div.desc {
padding: 15px;
text-align: center;
color: #343434;
text-transform: lowercase;
font-family: "Mplus 1p";
font-size: 10px;
text-align: center;
letter-spacing: 1px;
word-spacing: 3px;
}

.flex-center {
   display: flex;
  justify-content: center;
 }
</style>
</body>
<div class="gallery">
   <a target="_blank" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS">
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS" alt="pretty pretty" style="margin:auto; display:block" width="400px" height="400px">
</a>
<div class="desc">ulzzang </div>

所以这是描述网页上图像的代码，但是我需要帮助，以便在点击图像时以某种方式将sidbar切换为滑动...是否可能？谢谢。

Answer 1

您可以使用jQuery以最简单的方式执行此操作，只需使用一些新样式切换类。

$(document).ready(function() {

  $('img').click(function() {
    $('.sidebar').toggleClass("visible");
  });
});

https://jsfiddle.net/Kiboki/zh096gf1/22/

Answer 2

可以使用其中的幻灯片进行动画制作

jQuery解决方案

我们通过首先将left位置从屏幕-400px初始化为对象的宽度然后将鼠标悬停在img上来实现此动画，img将动画left值为0px

$(".gallery a img").on('mouseover', function() {
  $('.desc').animate({
    left: 0
  })
}).on('mouseout', function() {
  $('.desc').animate({
    left: -400
  })
})

div.gallery {
  border: 1px solid transparent;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  margin: auto;
  display: block;
  width: 400px;
  height: 400px;
}

div.desc {
  padding: 15px;
  text-align: center;
  width: 400px;
  left: -400px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <a target="_blank" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS" alt="pretty pretty">
  </a>
</div>
<div class="desc">ulzzang </div>

非jquery解决方案也是可能的

img = document.querySelector(".gallery a img")

img.onmouseover = function() {
  slide = document.querySelector(".desc.slide");
  if (!slide.classList.contains('in')) {
    slide.classList.remove('out');
    slide.classList.add('in');
  }
}

img.onmouseout = function() {
  slide = document.querySelector(".desc.slide");
  if (!slide.classList.contains('out')) {
    slide.classList.remove('in');
    slide.classList.add('out');
  }
}

div.gallery {
  border: 1px solid transparent;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  margin: auto;
  display: block;
  width: 400px;
}

div.desc {
  padding: 15px;
  text-align: center;
  width: 400px;
  left: -400px;
  position: absolute;
}

.slide {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.slide.out {
  left: -400px;
}

.slide.in {
  left: 0;
}

<div class="gallery">
  <a target="_blank" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS" alt="pretty pretty">
  </a>
</div>
<div class="desc slide out">ulzzang </div>