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>