下面是我尝试过的代码，它在JSFiddle上运行良好；
小提琴
function toggle(id) {
a = document.getElementById('toggle_'+id);
b = document.getElementById('display_'+id);
if (a.style.display=='block') {
a.style.display='none';
b.innerHTML='Click to Expand';
}
else {
a.style.display='block';
b.innerHTML='Click to Hide';
}
}
HTML:
<h2><strong>HEADING</strong></h2>
<a id="display_123" href="javascript:toggle('123');" style="color:black;font-weight:bold">Click To Expand</a>
<ul>
<li>Line 1</li>
<span id="toggle_123" style="display: none">
<li>Line 2</li>
<li>Line 3</li>
</span>
</ul>
我在我的wordpress网站上添加了相同的代码它可以切换文本点击/隐藏，但是它不能像在Fiddle上那样显示/隐藏元素。
网站链接
我使用Insert header Footer来添加jquery，并在文本模式下编辑post来添加标记。
在您的wordpress站点上，列表元素没有被id为toggle_123的span元素包围。 如果你补充说它应该会很好的工作。
一种稍微干净的方法是使用一个具有display:none；属性的css类。 然后可以使用classlist.toggle切换该类。 它将保存if语句。
例如:
function toggle(id){
var element = document.getElementById(id);
element.classList.toggle("hide");
}
CSS
.hide {
display: none;
}
