我想建议您使用JQuery选项。

$("#item").toggle();
$("#item").hide();
$("#item").show();

例如:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

function showStuff(id, text, btn) { document.getElementById(id).style.display = 'block'; // hide the lorem ipsum text document.getElementById(text).style.display = 'none'; // hide the link btn.style.display = 'none'; } <td class="post"> <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a> <span id="answer1" style="display: none;"> <textarea rows="10" cols="115"></textarea> </span> <span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span> </td>

你可以使用element的hidden属性:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

类和id的香草JS

通过ID

document.querySelector('#element-id').style.display = 'none';

按类别(单个元素)

document.querySelector('.element-class-name').style.display = 'none';

按类别(多个元素)

for (const elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}

我推荐Javascript，因为它相对较快，可塑性更强。

    <script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

你也可以使用这段代码来显示/隐藏元素:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

注意风格的区别。可见性和风格。显示是 当使用visibility:hidden与display:none不同时，标签是不可见的，但是在页面上为它分配了空间。标签被渲染，只是在页面上看不到。

请参见此链接查看区别。