javascript - 使div在单击时上下移动

Question

我有以下代码

<h1>Heading</h1>
<div>Content to be displayed</div>

现在单击 h1 时，整体应该向上移动，再次单击 h1 时，两者都应该下降。我如何实现这一点。我使用 jquery 切换功能上下移动 div，但我也希望 h1 向上移动。

Answer 1

首先，为容器元素设置动画是最简单的。

您可以使用 jQuery 来包装它们。

var container = $('h1, div').wrapAll('<div />').parent();

然后你会给那个容器 display: relative。您可以使用外部样式表(推荐)或 jQuery 来实现。

container.css('position', 'relative');

然后您可以攻击该容器的点击处理程序。

container.toggle(
function() {
   $(this).animate({ top: '-=20px' }, 500);
},
function() {
   $(this).animate({ top: '+=20px' }, 500);
});

jsFiddle .