javascript - 如何使元素相互交互并使用 jquery 定位

Question

$(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();
  });
});

`我一直在尝试使用 jquery 使元素相互交互，这是一个 Fiddle我的代码。虽然我一直有一些小问题。

1. 在现实环境中，元素可能不会按升序或逻辑顺序调用。
2. 元素在关闭时没有正确的动画，存在间隙，在某些情况下，某些元素不会根据点击的对象移动。
3. 可能有 4 个以上的元素。

这是我的问题:无论单击哪个元素以及元素的排序顺序如何，我如何才能使元素动画并正确覆盖。

Answer 1

请看这个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);
    }
  });

comment 中的一个人还为您提供了一个很好的解决方案和直接的解决方案。 ，为此你还需要对 CSS 做一些改变，所以如果你不想这样做，那么你也可以采用我的方法

这里我说的是另一种方法，每当你点击任何元素时我正在做的事情我发现它是下一个 sibling 并将它们向上放置 60 像素