Javascript 隐藏一个div并显示另一个div

我试图创造以下效果

我有三个

div

s:

div1

，

div2

，

div3

当我单击

div1

时，它向上滑动并被删除，同时，

div2

向上滑动并变得可见

类似地，当单击

div2

时，

div2

向上滑动并被删除，当

div2

向上滑动时，

div3

开始向上滑动并变得可见

---

我不知道该怎么做。任何帮助都将不胜感激。

此示例代码适用于所有div。您可以将选择器更改为特殊类或ID

$(document).ready(function(){
  $("div").click(function(){
     $(this).slideUp().next("div").slideDown();
  });
})

在您的情况下，这就足够了：

$("#div1").click(function(){$(this).slideUp();$("#div2").slideDown();
$("#div2").click(function(){$(this).slideUp();$("#div3").slideDown();

---

我建议使用jQuery来实现这一点。特别是查看

animate（）

函数。现在有许多不同的方法来实现这一效果，根据需要的结果，它们将有不同的实现。我有一个JSFIDLE链接，下面我给你举了一个这样的例子

在这个例子中，我有一个包装器

div

，它应用了

overflow:hidden

，作为“隐藏绑定”。然后我将3

div

包装在幻灯片包装中，以允许垂直滑动。然后，我所做的就是在

#first

和

#second

div

中添加一个单击事件，通过jQuery

$.animate（）

函数提供的动画效果，将

#slideWrapper

向上移动适当的边距。这应该给你一个好的起点

---

听起来你需要一个手风琴小部件。检查这个是的，这会工作，但点击最后一个元素会使它消失。使用这种方法，您必须添加如下内容：if（$（this）.is（“div:last of type”）{$（$div:first of type”）.slideDown（）；}；使其再次显示第一个div。不过，这绝不是解决问题的最佳方法。谢谢。这个问题没有尝试过，所以我写了一个一般性的答案。在您的评论之后，我添加了案例解决方案，但是这种非通用解决方案对我没有吸引力！我同意。我不知道用户为什么希望以这种方式迭代div元素。如果你有3个以上的元素，如果你想从第六跳到第二呢。就我个人而言，我会选择手风琴演奏。