如何让元素与jquery交互并定位

$(document).ready(function() {
//ENTRANCE

  $("#first").css("top", -1000);
  setTimeout(function() {
    $("#first").animate({
      top: 10
    }, 400);
  }, 200);

  $("#second").css("top", -1000);
  setTimeout(function() {
    $("#second").animate({
      top: 10 + 45 + 15
    }, 400);
  }, 400);

  $("#third").css("top", -1000);
  setTimeout(function() {
    $("#third").animate({
      top: 10 + 45 + 45 + 30
    }, 400);
  }, 600);

  $("#four").css("top", -1000);
  setTimeout(function() {
    $("#four").animate({
      top: 10 + 45 + 45 + 45 + 45
    }, 400);
  }, 800);

  //EXIT
  $('#first').on('click', function() {
    $('#first').toggle();
   $('#second').animate({top: 5}, 400);
  });

  $('#second').on('click', function() {
    $('#second').toggle();
    $('#third').animate({top: 5}, 400);
  });

  $('#third').on('click', function() {
    $('#third').toggle();
    $('#four').animate({top: 5}, 400);
  });

  $('#four').on('click', function() {
    window.location.reload();
  });
});

` I have been trying for a while to make elements interact with each other using jquery, Here is a Fiddle of my code. I have although been having a few hiccups.

“我已经尝试了一段时间，用jquery让元素相互交互，下面是我的代码。”我只是打嗝。

In a real world environment, elements may not be called in ascending or logical order.
在现实环境中，元素可能不会以升序或逻辑顺序被调用。
Items do not animate properly when closed, there are gaps and in some cases, some items do not move depending on which is clicked.
项目在关闭时不能正常动画，会有间隙，在某些情况下，一些项目不会根据单击的是哪个而移动。
There may be more than 4 items.
可能有超过4个项目。

Here is my question: How can i make the elements animate and cover properly regardless of which item is clicked and what order the items are sorted.

我的问题是:如何使元素具有动画效果并适当覆盖，而不管单击的是哪个项目以及排序的顺序。

2 个解决方案

#1

please see this fiddle

请看到这个小提琴

  var elements = $('.menu');// Here you can write any selector to get list of elements
  elements.on('click', function() {
    $(this).toggle();
    var nextEleemnts = $(this).nextAll('.menu'); // Same selector will follow here

    for (var i = 0; i < nextEleemnts.length; i++) {
      var topPos = $(nextEleemnts[i]).position().top - 60; //little bit of counting

      $(nextEleemnts[i]).animate({
        top: topPos
      }, 400);
    }
  });

There is also a good solution and straight forward solution provided to you by a guy in comment, For this you need to do a bit of change in CSS aswell, so if you don't want to do it, then you can take my approach aswell

也有一个很好的解决方案和直接的解决方案，由一个评论的家伙提供给你，为此你需要在CSS中做一些改变，所以如果你不想做，那么你也可以采用我的方法

Here I am talking an alternate approach, here what I am doing whenever you click on any element I am finding it's next siblings and position them up by 60 pixels

这里我讲的是另一种方法，这里我所做的是每当你点击任何一个元素，我就会找到它的下一个兄弟元素并将它们向上放置60像素

#2

If I were you, I would consider using jqueryUI

如果我是你，我会考虑使用jqueryUI

But maybe you have some restrictions of some kind.

但是也许你有一些限制。

I came up with a solution, in which I use jquery gt selector to select elements after the one clicked.

我想到了一个解决方案，在该方案中，我使用jquery gt选择器在单击后选择元素。

Please note that html is almost empty, which allows to add as many elements as you like.

请注意html几乎是空的，它允许添加任意多的元素。

(By the way I wouldn't make elements position absolute as well, but that's another story.

(顺便说一下，我也不会把元素放在绝对位置上，但那是另一回事了。

$(document).ready(function() {
  "use strict";

  var childCount = 12;
  // some templating library would make a better job
  for (var i = 0; i < childCount; ++i) {
    var child = $("<div>" + i + "th div </div>");
    child.css("background-color", "#" + ((1 << 24) * Math.random() | 0).toString(16));
    child.css("top", i * 50);
    $("#parent").append(child); // add any transition here
  }

  var reset = $("<div id='reset'>Reset</div>")
    .css("background-color", "black")
    .css("color", "white")
    .css("top", childCount * 50);
  $("#parent").append(reset);

  $("#parent > div").on("click", function() {
    var clicked = $(this);
    var index = $("#parent > div").index(clicked);
    $("#parent > div:gt(" + (index - 1) + ")").add(reset).animate({
      top: "-=50"
    }, 100, function() {
      clicked.remove();
    });
    childCount -= 1;
  });
});

#parent > div {
  width: 100px;
  height: 40px;
  margin-bottom: 10px;
  position: absolute;
  text-align: center;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <!-- some data-bind attribute would be better than an id -->

</div>

#1