Jquery Div元素隱藏

Question

我有一個包含多個div元素（子div）的div（main div）。我想用jquery隱藏所有div元素。有誰能夠幫助我。但主要的div應該總是顯示。

Answer 1

應該很容易爲：

$('#mainDiv > div').hide(); 

從#mainDiv或

$('#mainDiv div').hide(); 

只隱藏所有直接子隱藏的#mainDiv任何後代股利。

Answer 2

，你也可以激活隱藏這樣的：

$('#mainDiv div').slideUp(); 
$('#mainDiv div').slideToggle(); 
$('#mainDiv div').fadeToggle(); 

這些都是簡單的jQuery動畫。

Answer 3

嘗試這種方式，做工精細

<div style="text-align:center;background-color: lightblue;">Main div 
<button id="checkButton"type="button" class="btn btn-primary">Check</button> 
<div id="subdiv1" hidden>Sub Div 1</div> 
<div id="subdiv2" hidden>Sub Div 2</div> 
<div id="subdiv3" hidden>Sub Div 3</div> 
<div id="subdiv4" hidden>Sub Div 4</div> 
<div id="subdiv5" hidden>Sub Div 5</div> 
</div> 


<script> 
$(document).ready(function(){ 
$("#checkButton").click(function(){ 
$("#subdiv1").toggle(); 
$("#subdiv2").toggle(); 
$("#subdiv3").toggle(); 
$("#subdiv4").toggle(); 
$("#subdiv5").toggle(); 
}); 
}); 
</script>