2010-08-09 73 views
1

我們使用下面的代碼來顯示/隱藏內容點擊圖像時:腳本來顯示/隱藏的內容需要兩次點擊執行首次

function toggle(image,list) 
    { 
    var listElementStyle=document.getElementById(list).style; 
    if (listElementStyle.display=="none") 
    { 
     listElementStyle.display="block"; 
     document.getElementById(image).src="images/down.png"; 
     document.getElementById(image).alt="Close list"; 
    } 
    else 
    { 
     listElementStyle.display="none"; 
     document.getElementById(image).src="images/up.png"; 
     document.getElementById(image).alt="Open list"; 
    } 
    } 

將調用該函數是這樣的:

<p> 
<img src="images/up.png" alt="Open List" id="img39384" onClick="toggle('img39384','ul39384');">Agriculture 
<ul id="ul39384" class="catList"> 
<li> 
<a href="databases.jsp?cat=39386">Agriculture - Most Useful</a> 
</li> 
</ul> 
</p> 

第一次單擊「up.png」時,需要兩次截然不同的點擊以觸發腳本並顯示/隱藏內容。在第一次雙擊之後,一次點擊就會觸發該腳本。這種行爲在所有瀏覽器中都適用 - IE,Firefox,Opera,Safari和Chrome。

什麼可能導致此行爲?

+0

定位在圖像頂部或部分位於圖像頂部的任何html元素(如div)都可能導致此行爲,如果它具有任何類型的事件偵聽器以及使用類似開發人員工具欄的工具來檢查是否你可以找到任何定位在你的圖像前面的元素... – MilkyWayJoe 2010-08-09 15:58:34

回答

0

給你的img一個

​​

屬性頁面加載時開始。

1

element.style只包含該元素的樣式中定義的樣式屬性屬性(即,style=""),而不是式場所<style>塊或外部CSS文件繼承。

Read here抽象的方式來檢索樣式信息。

1

該元素的顯示值可能不是顯式地以「none」開頭。試試這個:

function toggle(image,list) 
    { 
    var listElementStyle=document.getElementById(list).style; 
    if (!listElementStyle.display || listElementStyle.display=="none") 
    { 
     listElementStyle.display="block"; 
     document.getElementById(image).src="images/down.png"; 
     document.getElementById(image).alt="Close list"; 
    } 
    else 
    { 
     listElementStyle.display="none"; 
     document.getElementById(image).src="images/up.png"; 
     document.getElementById(image).alt="Open list"; 
    } 
    } 
2

<ul>元素可能是從一個CSS規則繼承display: none

但是,因爲元素的樣式沒有明確設置(內聯),所以elem.style.displayundefined

相關問題