Javascript 使用按钮在可见和隐藏之间切换

嗨，我有一个图像，如果我点击该图像，多个图像将从隐藏变为可见，但是有没有一种方法，我可以继续点击该图像，并在隐藏和可见之间切换，因为现在我只能使图像在一次点击中可见

HTML

CSS

添加css:

img.left.active, image.right.active {
    visibility: visible;
}

然后将代码更改为：

$(document).ready(function(){
   $("img.home").click(function() {
       $("img.left, img.right").toggleClass('active');
   });
});

演示：

$（文档）.ready（函数（）{
$（“img.home”）。单击（函数（）{
$（“img.left，img.right”）.toggleClass（'active'）；
});
});
img.left{
可见性：隐藏；
}
对{
可见性：隐藏；
}
img.left.active，img.right.active{
能见度：可见；
}








您可以使用

试试这个：

CSS:

JS:

我试过了，但还是不行，现在我甚至连图片都不能显示出来
li {

display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}

html,body {
height:100%;  /* new */
}


ul {
position: fixed;
bottom: 0;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border: 2px solid #ccc;
border-width: 3px 0;  

}

img.left{
visibility: hidden;

}

img.right{
visibility: hidden;

}

img.left.active, image.right.active {
    visibility: visible;
}

$(document).ready(function(){
   $("img.home").click(function() {
       $("img.left, img.right").toggleClass('active');
   });
});

$(document).ready(function(){

   $("img.home").click(function() {
       $("img.left, img.right").toggle();
   });

});

.visible {
   visibility: visible !important;
}

 $(document).ready(function(){

   $("img.home").click(function() {
     $("img.left, img.right").toggleClass("visible");
  });

});