javascript - 单击时如何使元素始终 float 在顶部？

Question

我写了一个显示 div 列表的页面。当我点击任何元素时，该元素将显示在左 Angular (左:0；上:0；)。如果您检查我的 fiddle ，请单击第一项，我希望其他元素将准确显示第一项的位置。请帮忙。

Here is my Fiddle

$(document).ready(function () {
    var li = $('#list li');

    $(li).on('click', function () {
        $(".big").not(this).removeClass("big");
        $(this).toggleClass("big");
    });
});

更新:我还希望它们在我再次单击返回时返回到原来的位置。

Answer 1

Check out this JSFiddle

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

添加position:absolute;至 ul li.big

现在我们要创建一个虚拟 <li class="placeholder"></li>在<ul id="list">之后

给它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');

当然这需要一些调整(由于过渡效果，高度计算不正确)，但它应该为您指明正确的方向。