用javascript隱藏div div全部

我在製作保存內容的div，我的問題是如何讓所有的div崩潰。這裏的問題是，代碼需要動態，因爲我們不知道要創建多少個div。用javascript隱藏div div全部

首先這裏是我的javascript：加載頁面時

function pageLoad() 

var j = 1; while(j>0) 

collapseAll($('div'+j,'divx',+j)); 
j++;

這部分處理崩潰。所有div都需要摺疊。代碼應該是這樣的：

<a onclick="div('div1');" > //this at first time 
<div id="div1"> 
content 
</div>  
<a onclick="divx('divx1'); 
<div id="divx1"> 
content 
</div> 
<!-- this at next when div is created --> 
<a onclick="div('div2');" > 
<div id="div2"> 
content 
</div> 
<a onclick="divx('divx2'); "> 
<div id="divx2"> 
content 
</div>

等..這裏問題是，當代碼創建新的div它給出了在前面部分使用DIV相同的名稱。

forexample：

<a onclick="divx('divx2'); "> 
<div id="divx2"> 
content 
</div> 

//new div created: 
<a onclick="divx('divx2'); "> 
<div id="divx2"> 
content 
</div>

來源

2011-07-25 jimbo84

你可以用像下面這樣實現這一點。請注意，它需要jQuery（http://jquery.com）。

<script> 
$(function() { 
    $('a.collapse').click(function() { 
     $(this).closest('.collapsible').find('.collapse-container').toggle(); 
    }); 

    $('a#collapse-all').click(function() { 
     $('.collapse-container').hide(); 
    }); 

    // Added: Collapse all on load. 
    $('.collapse-container').hide(); 
}); 
</script> 

<div class="collapsible"> 
    <a class="collapse" href="#">Click to expand/collapse</a> 
    <div class="collapse-container"> 
     content 
    </div> 
</div> 

<div class="collapsible"> 
    <a class="collapse" href="#">Click to expand/collapse</a> 
    <div class="collapse-container"> 
     content 
    </div> 
</div> 

<a id="collapse-all" href="#">Click to collapse all</a>

來源

2011-07-25 09:56:10

我不認爲你需要額外的標記到，但是你的結構當然比OP使用的更好 –

@Nicola對於大型內容來說，這似乎（至少對我而言）是一個更清晰，更簡潔的解決方案，甚至可以更好地執行。這是類的用途，它避免了與嵌套DIV的交互。 –

我同意你的意見（正如我在評論中所說的，你的標記更好），這只是有時你無法控制標記！無論如何+1，答案非常明確 –

您可以在屬性開始有了選擇通過靶向其ID與格開始的所有div節省大量打字的使用和：

$('a').click(function(){ 
    //do something to all the divs, hide them for example 
    $('div[id^="div"']).hide(); 
    //hide only the next div: 
    $(this).next('div[id^="div"']).hide() 
    //hide all the divs until the nezt <a> 
    $(this).nextUntil('a').hide(); 

});

來源

2011-07-25 09:56:35

用javascript隱藏div div全部

回答

相關問題