$(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 个以上的元素。
这是我的问题:无论单击哪个元素以及元素的排序顺序如何,我如何才能使元素动画并正确覆盖。
最佳答案
请看这个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 像素
关于javascript - 如何使元素相互交互并使用 jquery 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37139539/