用一個onclick函數隱藏多個div

我正在尋找一個Javascript解決方案來解決這個問題。我有以下的HTML：用一個onclick函數隱藏多個div

<div id = "container"> 
    <div id = "data"> 
    <div> 
     <h3> Address</h3> 
     <b>Expand...</b> 
     <div id="content">ul. Pomorska</div> 
    </div> 
    <div> 
     <h3> Telefon </h3> <b>Expand...</b> 
     <div id="content">26565352</div> 
    </div> 
    <div> 
     <h3>Email</h3> 
     <b>Expand...</b> 
     <div id="content">[email protected]</div> 
    </div> 
    </div> 
</div>

我想隱藏的內容div當一個onclick展開。到目前爲止，我已經做了一個隱藏內容div並試圖爲節點分配事件處理函數的函數。

function hideinfo() { 
    var node = document.getElementById("data"); 
    var contactdata = node.getElementsByTagName("div"); 
    for(var i=0; i<contactdata.length;i++) { 
    if(contactdata[i].id == "content") { 
     alert(contactdata[i].previousSibling.innerHTML); 
     contactdata[i].previousSibling.addEventListener('click',ShowHide,false); 
     contactdata[i].style.display="none"; 
    } 
    } 
}

問題是警報顯示未定義。爲什麼不能看到節點？有沒有更好的方式在JavaScript中做到這一點？

來源

2012-11-18 Bartlomiej Lewandowski

是jquery作爲一個選項？ –

不，這是uni的事情，我們要看看不同的瀏覽器如何處理js –

因爲previousSibling最有可能是div元素之前的文本節點。你可能想使用previousElementSibling代替:)

在大多數瀏覽器今天，querySelectorAll，它可以讓你使用CSS選擇器尋找元素，也是一個不錯的選擇（IE8 +）

來源

2012-11-18 10:48:12 lqc

做previousElementSibling適用於所有最新的瀏覽器嗎？ –

我鏈接的MDN文檔頁面有一個兼容性表格。 – lqc

的previousSibling屬性返回以前選定元素的兄弟節點（相同樹層中的前一個節點）

它返回您的情況中的TEXT節點。

正如你可以在此看到的jsfiddle：http://jsfiddle.net/Xu383/

alert(contactdata[i].previousSibling.nodeName);

您使用的是querySelectorAll的更好。

此外，你不能有多個div與同一個id，使用類來代替。

來源

2012-11-18 10:52:48

用一個onclick函數隱藏多個div

回答

相關問題