1

我尝试了以下带有 div 标签的东西，

  <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>

它工作正常，但问题是第一次单击时未显示列表。我的代码有什么问题吗？？

4

6 回答 6

2

list.style.visibility=='hidden'是第一次点击时的虚假陈述

试试这个

{if(list.style.visibility=='hidden' || list.style.visibility='')
于 2012-06-11T06:16:32.167 回答
2

由于工作方式，您的代码无法按预期element.style工作。

检查 element.style 上的这个 MDN 链接：https ://developer.mozilla.org/en/DOM/element.style

由于 style 属性在 CSS 级联中具有与通过 style 属性的内联样式声明相同（且最高）的优先级，因此它对于在一个特定元素上设置样式很有用。

但是，一般来说，它对于了解元素的样式并没有什么用处，因为它只表示在元素的内联样式属性中设置的 CSS 声明，而不是来自其他地方的样式规则的那些声明，例如部分中的样式规则或外部样式床单。

因此，当您第一次运行代码时，即使element.style.hidden在外部CSS 表中声明了您的代码，样式声明仍为空，您需要执行额外的检查。

if (!list.style.visibility || list.style.visibility === 'hidden') {...}

你可以看看小提琴看看它的工作原理：http: //jsfiddle.net/Kk6TJ/1/

还：

  1. 最好在===不转换变量类型的情况下使用三等号进行严格比较。
  2. 您的事件处理程序中不需要大括号。如果您希望他们会创建范围 - 他们不会！只有 JavaScript 中的函数才有作用域。
于 2012-06-11T06:25:10.837 回答
1 
 <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>​
于 2012-06-11T06:18:10.760 回答
1

这是因为您的 if..else 不正常。重新排序决策语句更正了行为，现在第一次单击显示菜单项。

此外，如果您运行脚本并在 firebug 控制台中观看它，您将看到您的 javascript 代码在第一次单击时抛出警告。

在此处输入图像描述

我已经更新了你的代码 -

     <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }

</style>

<script type="text/javascript">

function Clickme()
{
var list = document.getElementById('list');

if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>
于 2012-06-11T06:38:38.773 回答
0

在样式标签和 css 文件中定义的样式不在 element.style.property 属性中，如果元素的样式设置为内联<element style="property:value;">或显式，则它们可用element.style.property = value;

要获取样式标签/表单中定义的元素的样式，请使用 window. getComputedStyle（元素，空）。获取属性值（属性）；`

list.style.visibility因此，您可以内联列表中的样式，使用 getComputedStyle getPropertyValue 或使用第一次单击时将为空的事实。

于 2012-06-11T06:27:42.830 回答
0

去做这样的事情 -

if(list.style.visibility=="visible")
{
   list.style.visibility="hidden";
}
else
{
   list.style.visibility="visible"
}
于 2012-06-11T13:26:16.173 回答