Question

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

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

我通过在您想要浮动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');

当然这需要一些调整（由于过渡效应，高度计算错误），但它应该指向正确的方向。

Answer 2

试试这个

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

Answer 3

所以我假设你希望你的物品回到原来的位置。

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

我还使用.is()来帮助确定项目是否需要移动/缩小

检查出来

http://jsfiddle.net/evpq8/12/

Answer 4

我刚刚在第一个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");
        } 

    });
});

http://jsfiddle.net/kBZ4L/3/

单击时如何使项目始终向左浮动？

4 个答案: