使用 Javascript 简单隐藏/展开答案

【问题标题】：Simple Hide/Expand with Javascript使用 Javascript 简单隐藏/展开
【发布时间】：2011-06-02 06:07:48
【问题描述】：

我创建了一个简单的展开/隐藏测试脚本：

<html>
<head>
<script type="type/javascript"><!--
function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
        document.getElementById(elementid).style.display = '';
    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</script>
</head>
<body>

<div><a href="javascript:showHide('div_1035677');">more...</a></div>

<div id="div_1035677" style="display:none">
HIDDEN CONTENT
</div>
</body>
</html>

我收到一条我无法理解的错误消息（第一行中预期的对象）。我在上面的代码中没有看到任何错误。 :-(

【问题讨论】：

一定是别的，你的代码对我有用：jsfiddle.net/fkling/WYPz3

标签： javascript hide show-hide expand

【解决方案1】：

是的，正如上面其他人所说，您应该使用 text/javascript，而不是 type/javascript。此外，使用 CDATA 块将防止 HTML/XML 验证器（例如 the W3C HTML validator）将 JavaScript 标记为不正确。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript">
        //<![CDATA[
        function showHide(elementid){
            if (document.getElementById(elementid).style.display == 'none'){
                document.getElementById(elementid).style.display = '';
            } else {
                document.getElementById(elementid).style.display = 'none';
            }
        }
        //]]>
        </script>
    </head>

    <body>
        <div><a href="javascript:showHide('div_1035677');">more...</a></div>
        <div id="div_1035677" style="display:none;">
        HIDDEN CONTENT
        </div>
    </body>
</html>

【讨论】：

【解决方案2】：

脚本标签的 mime 类型错误，应该是 text/javascript 而不是 type/javascript。

浏览器将忽略具有未知 mime 类型的脚本内容。

实际上，type 属性不是必需的。但是如果你要添加它，它应该是text/javascript，因为它是所有 3 个主要浏览器都认可的唯一值。按照标准，javascript 的正确 mime 类型是 application/javascript，但 IE 无法识别。

<script type="text/javascript">
    function showHide(elementid){
        if (document.getElementById(elementid).style.display == 'none'){
            document.getElementById(elementid).style.display = '';
        } else {
            document.getElementById(elementid).style.display = 'none';
        }
    }
</script>

进一步阅读
Should I include type="text/javascript" in my SCRIPT tags?

【讨论】：

【解决方案3】：

如果您已将类型设置为text/javascript，但仍无法正常工作，可能是因为该元素未加载到 DOM 中。解决问题的方法有两种：

像这样移动 div 下的 Javascript 代码：
<div id="div_1035677" style="display:none"> HIDDEN CONTENT </div> <script type="text/javascript">
将代码包装在 onload 事件处理程序中：
函数显示隐藏（）{ if (this.style.display == 'none'){ this.style.display = ''; } 别的 { this.style.display = '无'; } } window.onload = 函数（）{ document.getElementById('link').onclick = showHide; };

【讨论】：

【解决方案4】：

将type/javascript 更改为text/javascript

完整示例：

<html>
<head>
  <script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
      document.getElementById(elementid).style.display = '';
    } else {
      document.getElementById(elementid).style.display = 'none';
    }
  }
  </script>
</head>
<body>
  <div><a href="javascript:showHide('div_1035677');">more...</a></div>
  <div id="div_1035677" style="display:none">
    HIDDEN CONTENT
  </div>
</body>
</html>

【讨论】：

【解决方案5】：

type="type/javascript" 应该是type="text/javascript"。

【讨论】：