將列表顯示爲摺疊

我已經創建了一個列表並希望將其顯示爲摺疊狀態，並且在單擊列表項後應將其展開。我已經創建了演示here。我使用下面的JavaScript方法：將列表顯示爲摺疊

function toggle(id){ 
    var e = document.getElementById(id); 
    if (e.style.display == '') { 
     e.style.display = 'none'; 
    } else { 
     e.style.display = ''; 
    } 
}

我有以下問題：

有了這個代碼展開/收起不發生的jsfiddle作爲地方相同的代碼在HTML中正常工作。
默認情況下，列表應該顯示爲摺疊狀態。

有什麼想法？

來源

2013-07-23 MIM

這不包含任何jquery，只有javascript。 – kennypu

@kennypu。完成。刪除jQuery標記 – AnaMaria

新增風格=「顯示：無」到span元素做出的排行榜癱倒在默認和身體撥弄選擇沒有包裝。 http://jsfiddle.net/UDKLK/9/

<span id="objDetails" style="display:none">

來源

2013-07-23 08:54:39 AnaMaria

解決方案＃1：

使用No-Wrap in body在小提琴和得到它在撥弄工作：

enter image description here

解決方案2：

默認情況下，它總是崩潰了！如果你不想讓它變成callapsed，你可以設置display:none;。

這是一個純JavaScript的解決方案，也提供了許多其他的解決方案，你可以根據你的需要的話，我會建議使用選擇，如果你要包括在您的網站的任何jQuery庫jQuery

Fiddle Demo

來源

2013-07-23 08:50:29

謹慎解釋爲什麼downvoted？ –

更新您的一些代碼=是應該調用切換（）函數的文檔加載：

toggle('objDetails') 

function toggle(id){ 
var e=document.getElementById(id); 
if (e.style.display == '') 
    { 
     e.style.display = 'none'; 
    } 
else { 
    e.style.display = ''; 
    } 
}

這裏器的L墨水：demo

來源

2013-07-23 08:51:32 Sergio

是的，因爲@DKM提到你必須使用'no-wrap in body' js選項 – Sergio

這也適用。謝謝 – MIM

您需要將代碼包裝在頭部或身體中，而不是onLoad。

要使其崩潰默認情況下只需要添加：

#objDetails 
{ 
    display: none; 
}

Working example

無關注：這不包含jQuery的，只是純粹的JavaScript。

來源

2013-07-23 08:51:48 MisterBla

即使這也適用。謝謝。 – MIM

document.getElementById('objDetails').style.display = 'none';

您還必須將此行添加到JavaScript代碼。

這裏是updated fiddle

來源

2013-07-23 08:53:31 Paritosh

這也適用。謝謝 – MIM

將列表顯示爲摺疊

回答

相關問題