javascript - jquery show 依次隐藏多个div

Question

我想一个接一个地显示多个div。

例如，当页面加载时，它会显示:

A1

当A1被点击时，页面会显示

A1
B1

当B1被点击时，页面会显示

A1
B1
C1

谁能帮我实现这个目标。

Answer 1

这可能会让您入门。

$('.mydivs').click(function(){
  if ( $(this).next().is(':visible') ) $(this).nextAll().hide();
  else $(this).next().fadeIn();
});

.mydivs:not(:first-of-type){display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a1" class="mydivs">Div A1</div>
<div id="b1" class="mydivs">Div B1</div>
<div id="c1" class="mydivs">Div C1</div>
<div id="d1" class="mydivs">Div D1</div>