Javascript展開/摺疊div加載展開而不是摺疊

希望有更好的JavaScript知識的人可以協助，我想使用以下內容在我們的網站上創建展開/摺疊div，但是這會自動加載爲展開最初需要在崩潰時加載它。Javascript展開/摺疊div加載展開而不是摺疊

下面的代碼：

<script type="text/javascript"> 
// toggle specific 
function toggleDiv(id1,id2) { 
    var tag = document.getElementById(id1).style; 
    var tagicon = document.getElementById(id2); 

    if(tag.display == "none") { 
    tag.display = "block"; 
    tagicon.innerHTML = "&nbsp;-&nbsp;"; 
    } else { 
    tag.display = "none"; 
    tagicon.innerHTML = "&nbsp;+&nbsp;"; 
    } 
} 

function expandAll(cnt) { 
    for(var x=1; x<=cnt; x++) { 
    document.getElementById('content'+x).style.display="block"; 
    document.getElementById('icon'+x).innerHTML="&nbsp;-&nbsp;"; 
    } 
} 

function collapseAll(cnt) { 
    for(var x=1; x<=cnt; x++) { 
    document.getElementById('content'+x).style.display="none"; 
    document.getElementById('icon'+x).innerHTML="&nbsp;+&nbsp;"; 
    } 
} 

</script> 

<style type="text/css"> 
.title { 
    padding:5px; 
    border:1px solid #CCCCCC; 
    font:15px arial; 
    width:300px; 
    cursor:pointer; 
    height:20px; 
} 

.item { 
    padding:5px; 
    border:1px solid #CCCCCC; 
    font:12px verdana; 
    width:300px; 
} 

.item div { 
    border-bottom:1px dashed #CCCCCC; 
    padding:5px; 
} 

.button { 
    border:1px solid #CCCCCC; 
    padding:5px; 
    cursor:pointer; 
} 

</style> 

</head> 
<body> 

</div> 
<div class="title" onClick="javascript:toggleDiv('content1','icon1');"> 
    <span style="float:left">Sample Title 1</span> 
    <span id="icon1" style="float:right">&nbsp;-&nbsp;</span> 
</div> 
<div id="content1" class="item"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
</div> 
<div class="title" onClick="javascript:toggleDiv('content2','icon2');"> 
    <span style="float:left">Sample Title 2</span> 
    <span id="icon2" style="float:right">&nbsp;-&nbsp;</span> 
</div> 
<div id="content2" class="item"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
</div>

來源

2012-06-21 user994319

有兩種方法可以做到這一點。首先，你可以通過用+來代替-s並使用合適的css風格，來啓動所有的html。或者，建議您可以將collapseAll綁定到onload上 - 我建議您查看一下圍繞window.onload的最佳實踐，以獲得最佳做法Best practice for using window.onload，因爲如果您不小心，可能會遇到令人討厭的行爲

來源

2012-06-21 22:18:04 brettcvz

您好，感謝您的回覆。你可能會幫助我在哪裏放置window.onload代碼？當涉及到JavaScript時，並不是真的那麼簡單，基本上是尋找最簡單的方法來根據需要來實現這一點。謝謝 – user994319

當然。鏈接的問題實際上建議在窗口onload事件上使用事件偵聽器，而不是直接設置函數，但如果您想直接設置它，我建議您在當前的腳本標記中進行此操作，就在您定義collapseAll的位置 – brettcvz

<div class="title" onclick="javascript:toggleDiv('content1','icon1');"> 
        ^should be lowercase 
    <span style="float:left">Sample Title 1</span> 
    <span id="icon1" style="float:right">&nbsp;+&nbsp;</span> 
              ^should expand 
</div> 
<div id="content1" class="item" style="display:none;"> 
           ^should be hidden^
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
</div>

但是注意，非JS用戶不會看到什麼呢。

來源

2012-06-21 22:16:44 Bergi

Javascript展開/摺疊div加載展開而不是摺疊

回答

相關問題