Jquery Div 元素隐藏

Question

我有一个 div（主 div），其中包含多个 div 元素（子 div）。我想使用 Jquery 隐藏所有内部 div 元素。任何人都可以帮助我吗？但主 div 应该始终显示。

Answer 1

应该很简单：

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

仅隐藏 #mainDiv 的所有直接子级或

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

隐藏 #mainDiv 的任何后代 div。

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>