Question

我尝试使用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>

工作正常，但问题是第一次点击时没有显示列表。我的代码有什么问题。??

Answer 1

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

试试这个

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

Answer 2

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

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

由于style属性具有相同（和最高）的优先级   CSS级联作为内联样式声明通过style属性，它   对于在一个特定元素上设置样式非常有用。

然而，它对于了解元素的风格没有用   一般来说，因为它只表示在中设置的CSS声明   element的内联样式属性，而不是来自样式的属性   其他地方的规则，例如节中的样式规则，或   外部样式表。

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

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

您可以看一下小提琴，看它是否有效：http://jsfiddle.net/Kk6TJ/1/

同时

最好使用三等于===来执行严格比较而不转换变量类型。

您的事件处理程序中不需要花括号。如果你希望他们创造范围 - 他们不会！只有JavaScript中的函数才有范围。

Answer 3

 <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>

Answer 4

这是因为你的if..else没有按顺序排列。重新排序决策声明纠正了行为，现在首先点击显示菜单项。

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

enter image description here

我已更新您的代码 -

     <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>

Answer 5

样式标记和css文件中定义的样式不在element.style.property属性中，如果元素的样式设置为内联<element style="property:value;">或明确element.style.property = value;

，则它们可用

要获取样式标签/工作表中定义的元素的样式，请使用window。getComputedStyle（element，null）。getPropertyValue（property）;`

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

Answer 6

去寻找这样的事情 -

if(list.style.visibility=="visible")
{
   list.style.visibility="hidden";
}
else
{
   list.style.visibility="visible"
}

带有div标签的onclick事件

6 个答案: