使div在单击时上下移动

Question

我有以下代码

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

现在单击h1整个并且应该向上移动并再次点击h1都应该下降。我怎么能实现这个。我使用jquery切换功能来上下移动div但是我也想让h1向上移动。< / p>

Answer 1

div中的两个元素是什么并使div上下移动。

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

Answer 2

首先，最容易为容器元素设置动画。

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

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

然后你会给那个容器display: relative。您可以使用外部样式表（推荐）或使用jQuery。

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

然后你可以攻击点击处理程序到container。

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

jsFiddle