2

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

我有一个显示 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;
}
4

2 回答 2

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/

于 2013-03-11T14:22:35.513 回答
0 
<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>
于 2013-03-11T14:33:38.103 回答