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");
  });

});

Answer 2

添加css：

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").toggleClass('active');
   });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav align="middle">
<ul>
    <li><a href="#"><img src="https://placehold.it/200x100" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="https://placehold.it/200x100" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="https://placehold.it/50x50" class="home" style="width:80px;height:80px;" onclick="$('.video' || '.news' || '.games' || 'music').toggle();" onmouseover="this.src='http://placekitten.com/g/50/50';"
 onmouseout="this.src='https://placehold.it/50x50';"></a></li>
    <li><a href="#"><img src="https://placehold.it/200x150" class="right" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="https://placehold.it/200x150" class="right" style="width:100px;height:50px;"></a></li>
</ul>
</nav>

Answer 3

您可以使用$.toggle()

$(document).ready(function(){

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

});

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

3 个答案: