javascript - 锚标签中的功能不起作用

Question

所以我有几个功能：

function Toggle(id)
{
   EToggle(document.getElementById(id));
}

function EToggle(element)
{
   var subject = element.getElementsByTagName("div")[0];
   if(subject.style.display == "none")
   {
      subject.style.display = "block";
   }
   else
   {
      subject.style.display = "none";
   }
}

Toggle 函数在加载时调用，并且工作正常。但是，当我说 时
<a href="javascript:Toggle(flat)">，什么也没有发生。

所以问题是，为什么它在链接中不起作用，而是在页面加载时起作用？

如果您需要更多详细信息，这里是我的网站。

Answer 1

利用

<a href="javascript:Toggle('flat')">

代替

<a href="javascript:Toggle(flat)">

Answer 2

首先，如 Matei 所述，在 html 中的 id 字符串周围使用单引号。

接下来，更改 collapsible.js 的第 31 行

您要求单击的元素包含的第一个 div 。问题是，您的 <a> 标签本身没有任何标签。您在 <a> 之后的 div 之后，因此，您想要获取父节点的 div 元素。

var subject = element.parentNode.getElementsByTagName("div")[0];

请记住，您的结构是这样的：

<div class="collapsible" id="demo">
    <a href="javascript:Toggle('demo')"><h1>Demolition and Removal</h1></a>
    <div style="display: none; ">
        <p>Content removed from here</p>
    </div>
</div>