为什么不切换（style.display）

Question

我想知道为什么我在这里遇到此代码时“显示未定义”。 这是我正在谈论的页面部分的模型。 我在标头中有javascript，在PHP echo中有html。

<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
$userid = $_SESSION['userid'];
$username = $_SESSION['username'];

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org   /TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript">

function display(id) {
var e = document.getElementById(id);
alert(e.style.display);
if (e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';

}
}
</script>
</head>


<body>
<?php
   if ($username && $userid) {
    echo "<a href=\"javascript: display('menuLinksAdmin');\">MenuLinks</a>
        <div id='menuLinksAdmin' style='display: none;'>
<form action='insert.php' method='post'>
    linktitle:          <input type='text' name='linktitle' />
    linkdescription:    <input type='text' name='linkdescription' />
                        <input type='submit' />
</form>
</div>";

}

else
echo 'somethin up homie';

?>

Answer 1

更新

这个问题似乎与范围有关。 jsfiddle默认情况下将脚本代码包装在mootols onload事件中，该事件使对display函数的调用变得混乱。

当选择“无环绕（头部）”时，它可以正常工作。

Answer 2

您的代码对我有效，如此处所测试： http : //jsfiddle.net/pu3wQ/1/

<a id='menuLinks' href="javascript:display('menuLinksAdmin');">MenuLinks</a>
<div id='menuLinksAdmin' style='display:none;'>
<form action='insert.php' method='post'>
    linktitle: <input type='text' name='linktitle' />
    linkdescription: <input type='text' name='linkdescription' />
    <input type='submit' />
</form>
</div>

<script>
function display(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
    e.style.display = 'none';
}
else {
    e.style.display = 'block';

    }
}
</script>

我认为您的问题在于范围界定。 尝试将JS代码放在HTML文件的头部，然后将标记放在正文中。

如果您对jQuery感到满意，那么这里的版本可以如您所愿。 http://jsfiddle.net/pu3wQ/8/

这是使用jQuery的简短版本： http : //jsfiddle.net/pu3wQ/11/

Answer 3

我将功能的名称更改为对其功能的更多描述。 另外，在尝试使用某个元素之前，请检查是否已获得该元素。 并且切换显示属性时，最好在“无”和“”之间切换（见下文）：

function toggleDisplay(id) {

  var element = document.getElementById(id);

  // Only proceed if an element was found
  if (element && element.style) {

    if (element.style.display == 'none') {
        element.style.display = '';  // empty string

    } else {
        element.style.display = 'none';
    }
  }
}

将display设置为''可以使其返回默认值（或CSS可以继承或设置为的任何值），而该默认值不能被阻止。 同样，如果未显式设置该属性，则即使计算值是“ block”（或inline-block或table或inline-table或其他许多值之一），也将是。

以上可以简化为：

element.style.display = element.style.display == 'none'? '' : 'none';

另外，当其他一些元素（例如按钮或样式范围）更适合工作时，请不要使用A元素和假href。 元素具有默认行为，因此不适合使用。

最后，我将更改函数的名称，使其与函数的实际功能更加一致，因此：

<span id='menuLinks' onclick="toggleDisplay('menuLinksAdmin');">MenuLinks</span>

然后添加CSS以您想要的方式设置跨度样式，也许是：

#menuLinks {
  cursor: pointer;
  text-decoration: underline;
}

为什么不切换（style.display）

问题描述

3 个解决方案

解决方案1
1 2012-11-13 23:37:37

解决方案2
0 2012-11-13 23:43:14

解决方案3
0 2012-11-13 23:50:25

为什么不切换（style.display）

问题描述

3 个解决方案

解决方案1 1 2012-11-13 23:37:37

解决方案2 0 2012-11-13 23:43:14

解决方案3 0 2012-11-13 23:50:25

解决方案1
1 2012-11-13 23:37:37

解决方案2
0 2012-11-13 23:43:14

解决方案3
0 2012-11-13 23:50:25