用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" 
}