Question

我有这段代码

的style.css

.row {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 22px;
    width: 100%;
    background: black;
    color: white;
    padding: 0px;
}

.content {
    margin-top: 22px;
    padding: 10px;
}

div.navigation span.left {
  float: left;
  text-align: left;
  font-weight: bold;
  width: 49%;
  }

div.navigation span.right {
  float: right;
  text-align: right;
  font-weight: bold;
  width: 49%;
  }

.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: black;
    color: white;
    padding: 10px;
opacity:0.9;
display: ;
}

navigation.htm

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Home</title>
<link rel="StyleSheet" href="style.css" type="text/css">
<script type="text/javascript">
function dispHandle(obj)
{
if (obj.style.display == "none")
obj.style.display = "";
else
obj.style.display = "none";
}

</script>
</head>
<body onload="dispHandle(uni);">
<div class="navigation">
<div id="container" style="width: 100%;">
<div class="row"> <span class="left"><a onmouseover="dispHandle(uni)">Activities</a><img
style="width: 18px; height: 18px;" alt="" src="images/void.png"></span>
<span style="font-weight: bold;" class="right"><img
style="width: 18px; height: 18px;" alt="" src="images/volume.png"><img
style="width: 18px; height: 18px;" alt="" src="images/bluetooth.png"><img
style="width: 18px; height: 18px;" alt="" src="images/wireless.png"><img
style="width: 26px; height: 18px; font-style: italic;" alt=""
src="images/battery.png"><iframe
src="http://free.timeanddate.com/clock/i2vrnsgh/fcfff/tct/pct/ftb"
allowtransparency="true" frameborder="0" height="18" width="86"></iframe><img
style="width: 18px; height: 18px;" alt="" src="images/user.png">Demi
Lovato&nbsp;</span>
</div>
</div>
</div>
<div id="uni">
<div style="text-align: center;" class="menu"> <br>
<img onclick="dispHandle(uni)"
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
    src="http://demilovato.sourceforge.net/images/close.png"><br>
<br>
<div align="center">
<table style="text-align: left; width: 410px; height: 268px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="index.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Home.png"></a><br>
Home<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Downloads.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Downloads.png"></a><br>
Downloads<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Screenshots.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Screenshots.png"></a><br>
Screenshots<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Links.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Links.png"></a><br>
Links<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="FAQ.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/FAQ.png"></a><br>
FAQ<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Contact.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Contact.png"></a><br>
Contact<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="About.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/About.png"></a><br>
About<br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>
</body>
</html>

它假设能够将鼠标悬停在“活动”上，并显示全屏css菜单然后单击X关闭我通过show hide javascipt函数执行此操作。两个问题是当我在Firefox中加载它不起作用但它适用于我尝试过的所有其他浏览器（Safari，Chrome，Rekonq）另外我如何隐藏它而不是onload？

Answer 1

示例解决方案：http://jsfiddle.net/msZVY/3/

正如在Firefox控制台中所说，Firefox不知道“uni”是什么。函数dispHandle(uni)表示“使用具有对象uni的参数执行dsipHandle函数”。 uni未定义。

我不确定为什么Safari / Chrome能够“更聪明”，并且看到uni是元素的id。（也许其他人可以启发我）但对于Firefox，您应该使用以下方式明确说明：

function dispHandle(id)
{
  obj = document.getElementById(id);  //define obj using the id
  if (obj.style.display == "none")
    obj.style.display = "block";
  else
    obj.style.display = "none";
}

在你的内联javascript中你应该把uni放在引号中。 onmouseover="dispHandle('uni')"代替onmouseover="dispHandle(uni)"

要回答另一个关于除了onload之外隐藏它的另一种方法的问题，你可以使用常规的css来做：

#uni{display:none}

在上面的函数中，我也将其从obj.style.display = "";更改为obj.style.display = "block";，因为这会在样式表中将其明确更改为div的默认块显示，覆盖style.css

CSS覆盖菜单无法在Firefox中运行

1 个答案: