Javascript 如何使项目在单击时始终浮动在顶部？

我写了一个显示div列表的页面。当我单击任何项目时，该项目将显示在左角（左：0；顶部：0；）。如果你检查我的小提琴，点击第一个项目，我希望其他项目将显示第一个项目的确切位置。请帮忙

更新：当我再次单击“上一步”时，我还希望它们返回其原始位置。

尝试此操作

$(document).ready(function () {
    $('#list li').on('click', function () {
        $(".big").removeClass("big");
        var clone = $(this).addClass("big").clone();
        $(this).remove();
        $('#list').prepend(clone);
    });
});

我通过在您希望浮动li的位置创建一个虚拟li元素来解决您的问题。然后将其设置为打开的li的高度，该高度将获得放置在左上角的绝对位置

添加

位置：绝对位置至
ulli.big

现在我们要在
之后创建一个虚拟

给它一个CSS定义

ul li.placeholder {
    display:none;
    height:200px;
    width:500px;
}

并添加到单击事件功能中：

if($(this).hasClass("big"))
 $('ul li.placeholder').css('display','block').height($(this).height());
else
 $('ul li.placeholder').css('display','none');

当然，这需要一些调整（由于过渡效果，高度计算不正确），但它应该为您指出正确的方向。
因此我假设您希望您的物品返回其原始位置

我们需要做的是在页面加载中为每个项目添加一个
data
属性，以便稍后将它们恢复到原始位置

我还使用
.is（）
帮助确定是否需要移动/收缩项目

看看

我刚刚在第一个li元素中添加了一个类，并交换了htmls

$(document).ready(function () {
    var li = $('#list li');
    $(li).on('click', function () {
        if ($(".firstItem").hasClass("big")) 
        {$(".firstItem").removeClass("big");}
            else
         {
            $(".firstItem").removeClass("big");

            var posItem = $(".firstItem").html();
            var curitem = $(this);
            $(".firstItem").html($(this).html());

            $(this).html(posItem);
            $(".firstItem").not(this).removeClass("big");

            $(".firstItem").toggleClass("big");
        } 

    });
});

当您再次单击它们时，是否希望它们返回到原始位置？在旁注中，您的小提琴在IE9中不起作用这与Jquery 1.10.1不起作用。试试1。6@haxxxton是的，我要他们把原件还给我position@haidinhtran查看Rene roth的解决方案或我的解决方案，这取决于您希望动画的外观。这种方法的缺点是，在完成后，您永远无法将放大的div恢复到原始位置，除非你跟踪我知道的所有位置，但问题是如何使项目在单击时始终浮动在顶部？@slash197这是我的错，我将添加更多详细信息你无法通过再次单击来关闭项目是的，我计划添加另一个类并再次切换它，但只是停止尝试：D，我建议使用@ReneRoths answer，是一个更好的一个你的链接在上面的帖子还没有changed@haxxxton：是的，我编辑过，谢谢！你的解决方案对我很好。@Amarnathrhenoy你好，你的解决方案是另一种让我理解我所写内容的方式，这对我很有帮助，谢谢！这会在单击的li以前的位置留下一个空白点。
li
s的数量永远不会改变。。我想您看到了由于包装
浮动
项的不同高度而产生的间隙
$(document).ready(function () {
    var li = $('#list li');
    $(li).on('click', function () {
        if ($(".firstItem").hasClass("big")) 
        {$(".firstItem").removeClass("big");}
            else
         {
            $(".firstItem").removeClass("big");

            var posItem = $(".firstItem").html();
            var curitem = $(this);
            $(".firstItem").html($(this).html());

            $(this).html(posItem);
            $(".firstItem").not(this).removeClass("big");

            $(".firstItem").toggleClass("big");
        } 

    });
});