单击展开在jsfiddle上工作，但在wordpress上不工作

Question

下面是我尝试过的代码，它在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来添加标记。

Answer 1

在您的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;
}