jquery如何使元素相互交互并定位答案

【问题标题】：How to make elements interact with each other and position with jqueryjquery如何使元素相互交互并定位
【发布时间】：2016-05-10 13:09:32
【问题描述】：

$(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 我的代码。我虽然有一些小问题。

在现实世界环境中，元素可能不会按升序或逻辑顺序调用。
关闭时项目的动画效果不正确，存在间隙，在某些情况下，某些项目不会移动，具体取决于单击的对象。
可能超过 4 项。

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

【问题讨论】：

如果单击第一个元素，是否要将所有元素移动到上方一个位置？
在现实世界中，javascript 代码不依赖于元素 ID。您可以通过索引选择子元素
是的，先生，我希望所有元素都上移一个位置。
您可以考虑这个其他问题：stackoverflow.com/questions/19553024/…（您也可以在删除项目时添加 css 过渡）
查看jsfiddle.net/kfnyn908/5

标签： javascript jquery html css

【解决方案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 进行一些更改，所以如果您不想这样做，那么你也可以采用我的方法

这里我说的是另一种方法，每当你点击任何元素时我正在做的事情我发现它是下一个兄弟并将它们定位到 60 像素

【讨论】：

@QuatbanTaco 对你有帮助吗？
工作，非常感谢，我希望有人觉得这很有用

【解决方案2】：

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

但也许你有某种限制。

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

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

（顺便说一下，我也不会让元素位置绝对，但那是另一回事了。

$(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>

【讨论】：