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

Question

您好，我有一张图片，如果我点击图片，多个图片会从隐藏变为可见，但是有没有一种方法可以让我继续点击图片并在隐藏和可见之间切换，因为现在我可以只需单击一下即可使图像可见。

HTML

<nav align="middle">
<ul>
    <li><a href="#"><img src="images/video-1.png" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/news-1.png" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/logo-4.png" class="home" style="width:80px;height:80px;" onclick="$('.video' || '.news' || '.games' || 'music').toggle();" onmouseover="this.src='images/logo-4-hover.png';"
 onmouseout="this.src='images/logo-4.png';"></a></li>
    <li><a href="#"><img src="images/games-1.png" class="right" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/music-1.png" class="right" style="width:100px;height:50px;"></a></li>
</ul>
</nav>

Javascript

$(document).ready(function(){

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

});

CSS

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;

}

Answer 1

试试这个:

CSS:

.visible {
   visibility: visible !important;
}

JS:

 $(document).ready(function(){

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

});