為什么不切換（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