为什么不切换（style.display）

Question

I am wondering why i am getting "display is undefined" when it comes to this code right here. 我想知道为什么我在这里遇到此代码时“显示未定义”。 Here is a mock up of the part of my page that i am talking about. 这是我正在谈论的页面部分的模型。 I have the javascript in the header and the html within a PHP echo. 我在标头中有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

Updated 更新

This issue seems to be related to be scope related. 这个问题似乎与范围有关。 jsfiddle is wrapping the script code in a mootols onload event by default which messes up the call to the display function. jsfiddle默认情况下将脚本代码包装在mootols onload事件中，该事件使对display函数的调用变得混乱。

When selected "no wrap (head"), it works fine. 当选择“无环绕（头部）”时，它可以正常工作。

Answer 2

You code worked for me as tested here: http://jsfiddle.net/pu3wQ/1/ 您的代码对我有效，如此处所测试： 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>

I think your issue is with scoping. 我认为您的问题在于范围界定。 Try having the JS code on the head part of the HTML file and put the mark up in the body. 尝试将JS代码放在HTML文件的头部，然后将标记放在正文中。

If you are comfortable with jQuery here is the version that works like you expect. 如果您对jQuery感到满意，那么这里的版本可以如您所愿。 http://jsfiddle.net/pu3wQ/8/ http://jsfiddle.net/pu3wQ/8/

Here is a much shorter version with jQuery: http://jsfiddle.net/pu3wQ/11/ 这是使用jQuery的简短版本： http : //jsfiddle.net/pu3wQ/11/

Answer 3

I would change the name of the function to be more descriptive of what it does. 我将功能的名称更改为对其功能的更多描述。 Also, check that you get an element before trying to do something with it. 另外，在尝试使用某个元素之前，请检查是否已获得该元素。 And when toggling the display property, you are much better to toggle between "none" and "" (see below): 并且切换显示属性时，最好在“无”和“”之间切换（见下文）：

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';
    }
  }
}

Setting display to '' allows it to return to its default (or whatever value it might inherit or be set to by CSS), which may not be block. 将display设置为''可以使其返回默认值（或CSS可以继承或设置为的任何值），而该默认值不能被阻止。 Also, if the property hasn't been explicitly set, it will be '' even if the computed value is 'block' (or inline-block or table or inline-table or one of the other many values). 同样，如果未显式设置该属性，则即使计算值是“ block”（或inline-block或table或inline-table或其他许多值之一），也将是。

The above can be shortened to: 以上可以简化为：

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

Also, don't use an A element and fake href when some other element (like a button or styled span) is better for the job. 另外，当其他一些元素（例如按钮或样式范围）更适合工作时，请不要使用A元素和假href。 A elements have default behaviour that makes them unsuitable. 元素具有默认行为，因此不适合使用。

Lastly, I would change the name of the function so it's more aligned with what the function actually does, so: 最后，我将更改函数的名称，使其与函数的实际功能更加一致，因此：

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

Then add CSS to style the span the way you want, maybe: 然后添加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