Question

这是我想要实现的东西的简化版

我有一个显示3个div框的页面

<div class="divd" id='div1' style="left:50px">>111</div>
<div class="divd" id='div2' style="left:150px">222</div>  
<div class="divd" id='div3' style="left:250px">333</div>
<p></p>
<p></p>
<p><input type="button"  id="tg" value="toggle"></p>

我正在使用Jquery来切换中间div

  $('#tg').click(function() { 
    $('#div2').toggle('slow', function() {
    });
  });

这一切都按预期工作，但我想要做的是通过隐藏div来“缩小差距”，所以最终结果是div1和div3彼此相邻可以这样做，任何指针或帮助非常感激，谢谢

.divd { 
position:absolute ; 
width: 50px;
height: 50px;   
top: 50px ;
left: 120px ; 
border: 1px solid black;
background-color:#999; 
border-radius:5px;  
z-index:200;
text-align:center;
}

Answer 1

我认为你的元素绝对定位，如：http://jsfiddle.net/agpHB/1/

你不需要这样做。试试这个：

http://jsfiddle.net/agpHB/2/

.divd {
    float: left;
    width: 150px;
    background-color: #eee;
}

<div class="divd" id="div1">111</div>
<div class="divd" id="div2">222</div>
<div class="divd" id="div3">333</div>

浮动甚至不是必需的。如果必须绝对定位，则需要在执行切换的同时将元素3滑动到元素2的位置。它不会那么简单。

更新：要回复您对其他元素的评论，请尝试以下操作：http://jsfiddle.net/agpHB/3/

Answer 2

<script>
flag=0;
displayhide(x){
a=document.getElementById(x).style;
if(flag=0)
    {
    a.display="block";
    flag=1;
    }
else
    {
    a.display="none";
    flag=0; 
    }
}
</script>

and use
<p><input type="button"  id="tg" onclick="displayhide('div2')" value="toggle"></p>

切换DIV并缩小差距

2 个答案: