Question

我有一个div元素列表，全部都是float：像这样一个接一个地离开

<div id="container">

   <div id=0" style="float:left;> Stuff </div>
   <div id=1" style="float:left;> Stuff </div>
   <div id=2" style="float:left;> Stuff </div>
   ...
   <div id=n" style="float:left;> Stuff </div>

</div>

我想要实现的目标如下：

如果我点击其中一个div，它将推动周围的div（左边的那些和右边的那些）并填充它自己的行。然后再次单击它将返回到原始配置。

我的尝试：

添加强力分离器：只需使用jQuery在div之前和之后堆叠
切换CSS属性：clear：两者都是所需的div

可能是因为时间较晚，但这些方法似乎都不可靠。获得此功能的更合理方法是什么？

谢谢你的时间！

Answer 1

我想你想实现这个目标，请查看Fiddle

 var parentWidth =  $("#container").css("width");
 var originalWidth = $($("#container div")[0]).css("width");
 $("#container div").click(function(){
   if($(this).css("width") != parentWidth) {
     $(this).css("width",parentWidth);
   }
   else {
     $(this).css("width",originalWidth);
   }
 });

Answer 2

        var divWidth = 250;
        var n= 5; //this will be no of inner divs
        $(function(){
            $('#container div').each(function(index, element) {
                $(this).click(function(e) {
                    if($(this).width() == divWidth)
                    {
                        var dt = divWidth;
                        if(index != 0)
                        {
                            $(this).prev().hide();
                            dt += divWidth;
                        }
                        else if(index < n)
                        {
                            $(this).next().hide();
                            dt += divWidth;
                        }
                        $(this).width(dt);
                    }
                    else
                    {
                        $(this).width(divWidth);
                        if(index != 0)
                        {
                            $(this).prev().show();
                        }
                        else if(index < n)
                        {
                            $(this).next().show();
                        }
                    }
                });
            });
        });

在一系列float：left div中创建/删除一行

2 个答案: