Question

我知道这个问题已被问过很多次了，我在这个网站上看了几个主题，但我觉得我的问题有点具体了。

因此，我的代码目前所做的是，如果您单击加号按钮图像，则会显示隐藏在其下方的文本。如果再次单击加号按钮图像，文本会再次隐藏。

我要做的是当你显示隐藏文字时，加号按钮会变成减号按钮。如果再次隐藏文本，减号按钮将变为加号按钮。

在下面的代码中，我通过查看以前的问题尝试了一种方法。

我尝试将您可以点击的第一张图片命名为“img1”。在“if（e.style.display ==”block“）”和“else”下的Javascript代码中，我编写了代码，我尝试更改“img1”的图像，但没有任何反应。

我做错了什么？

JSFiddle链接： jsfiddle.net/YqDhe

请注意，在JSFiddle中，出现和消失的文本无法正常工作，但它在我正在使用的CMS上执行。

<style>
    #para1, #para2, #para3{
        display:none;
    }
    .tab { 
        margin-left: 40px; 
        margin-right: 40px;
    }
</style>
<script type="text/javascript">   
    function toggleMe(a){
        var e=document.getElementById(a);    
        if(!e){
            return false;
        }    
        if(e.style.display=="block"){
            e.style.display="none"
            e.getElementById("img1").src = "http://i.imgur.com/ZFvketc.png"
        }
        else{
            e.style.display="block"
            e.getElementById("img1").src = "http://i.imgur.com/lZIalfM.png"
        }
        return true;
    }
</script>
<input type="image" name = "img1" src = "http://i.imgur.com/ZFvketc.png" onclick="return toggleMe('para1')" value="Toggle">
&nbsp; <font color="#0066a4">Who Am I</font><br>
<br>
<hr />
<p id="para1" class = "tab">
    blabalbal
</p>
<br>
<p class="title"><input type="image" src = "http://i.imgur.com/lZIalfM.png" onclick="return toggleMe('para2')" value="Toggle"> TEST</p><br>
<div id="para2">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<input type="image" src = "http://i.imgur.com/gitHhmZ.png" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</span>

Answer 1

return属性中不需要onclick。

<input type="image" src = "http://i.imgur.com/gitHhmZ.png" onclick="toggleMe('para3')" value="Toggle"><br>

您还需要将输入分配给ID。

<input type="image" id="para3" src="http://i.imgur.com/gitHhmZ.png" onclick="toggleMe('para3')" value="Toggle"><br>

HTML / JavaScript / CSS：通过单击更改图片

1 个答案: