html - 如何通过单击图像切换侧边栏？

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>

所以这是描述网页上图像的代码，但我需要有关如何以某种方式将侧边栏切换为在单击图像时滑入的帮助...这可能吗？谢谢。

Answer 1

您可以使用 jQuery 以最简单的方式做到这一点，只需切换一个具有一些新样式的类即可。

$(document).ready(function() {

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

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