如何切换隐藏/显示div标签并同时移动另一个？

Question

我有一个下面的脚本，当点击超链接时会隐藏DIV标签（在本例中为“foo”）。然后显示再次单击链接的时间。

这个脚本非常适合我的用途，但需要稍微修改编码，移动另一个（“在这种情况下”栏“）。

我想将DIV标记ID“bar”移动到页面上的其他位置。再次点击该链接，我希望它再次移回。

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
</script>

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is a foo</div>
<div id="bar">This is a bar</div>

Answer 1

为什么不直接将DIV的CSS位置设置为relative / absolute / fixed / whatever，并使用CSS方法同时更改DIV的左/右顶部/底部属性？