Question

我想用.slideToggle显示/隐藏一些div。我希望.slideToggle在扩展时始终将内容推送下来，并在收缩时从下面提取内容。

但它似乎会推动内容和/或在展开时向下滚动，从而导致动画跳动。

这是一个小提琴：http://jsfiddle.net/photocurio/X785b/

$('.milford-directions').click(function() {
  $('#milford').slideToggle();
});
$('.tufts-directions').click(function() {
  $('#tufts').slideToggle();
});
$('.our-affiliations').click(function() {
  $('#affiliations').slideToggle();
});

Answer 1

这种情况正在发生，因为您将ID作为锚点href。默认情况下，当单击ID为href的锚点时，页面将滚动到该ID。

看一下我删除ID：http://jsfiddle.net/X785b/5/

<a class="our-affiliations directions">FIRST BOX</a></p>

您可以使用preventDefault或return false

解决此问题

http://jsfiddle.net/X785b/7/

Answer 2

这看起来好一点

http://jsfiddle.net/X785b/3/

JQUERY

$('.our-affiliations').click(function() {
    $('#affiliations').slideToggle();
    return false;
});

$('.tufts-directions').click(function() {
    $('#tufts').slideToggle();
    return false;
});
$('.milford-directions').click(function() {
    $('#milford').slideToggle();
    return false;
});

并在按钮单击时返回false会停止链接跳转到href中指定的div的ID。

jquery .slideToggle推送内容

2 个答案: