用div标签

Question

我试图用的东西div标签如下onclick事件，

<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

，你期望它对于因element.style作品您的代码不起作用。

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

由于风格属性在 CSS级联经由样式属性的内嵌样式声明相同的（和最高）的优先级，它 是用于在一个特定元素上设置样式。

但是，它是不适合的 一般学习有关元素的样式很有用，因为它仅代表CSS声明中 元素的内嵌样式属性设置，而不是那些来自风格 规则其他，如风格规则中的部分，或 外部样式表。

所以，当你第一次运行你的代码，即使你element.style.hidden在外部 CSS表声明，该样式声明保留为空，你需要进行额外的检查。

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

您可以在小提琴看看，看看它的工作：http://jsfiddle.net/Kk6TJ/1/

另外：

1. 这是最好使用三重等于===无须转换变量的类型进行严格的比较。
2. 你的事件处理程序中不需要花括号。如果你希望他们会创造范围 - 他们不会！只有JavaScript中的函数才有作用。在风格标签和CSS文件中定义

Answer 2

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

试试这个

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

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

样式不在element.style.property财产，他们有可用的元素都有样式设置内联<element style="property:value;">或明确element.style.property = value;

要获得样式元素在样式标记/工作表使用窗口中定义。 getComputedStyle（element，null）。 getPropertyValue（property）;`

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

Answer 5

这是因为你的if ..否则不是为了顺序。重新排列决策声明纠正了行为，现在首先点击显示菜单项。另外，如果您运行脚本并在萤幕控制台中观看它，您会看到您的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> 

Answer 6

围棋这样的事情 -

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