jquery - 隐藏显示切换按钮图像

Question

所以我对编码比较陌生，我一直在尝试放置一个切换按钮来隐藏/显示图像。但是，我希望它一开始是隐藏的，然后在单击后显示，而不是首先显示当前的状态。

我尝试使用 visibility="hidden" 但这只是使图像成为仍然“显示”的空白区域。如果有人可以帮助我/帮助我修改我的代码，我将不胜感激!

这是我一直在做的事情:

<button type="button" button class="btn btn-default btn-xs" onclick="$('#imgname').toggle();">view</button>
<div id="imgname">
    <img class="img-responsive" src="images/imgsource">
</div>

Answer 1

添加此 jquery 代码

$(function(){
   $("button").click(function(){
       $("img").toggleClass("hidden");
   });
});

更改 html

<button type="button" button class="btn btn-default btn-xs" onclick="$('#imgname').toggle();">view</button>
<div id="imgname">
    <img class="img-responsive hidden" src="images/imgsource">
</div>