我正在为一位朋友制作一个小网站，我需要创建一个我有一些链接的页面。每个链接触发一个Jquery .slideToggle（）以在同一页面中显示相关的div。
我注意到使用最新版本的谷歌浏览器，当最后一个页面元素触发.slideToggle（）时，它有一个奇怪的动画：当其他div按预期切换时，最后一个似乎被切换为“慢”并且比其他人更少“流畅”。
HTML：
<div class="container">
<a href="#" class="FAQ" data-link="faq1"><h2>+Experiences</h2></a>
<div class="info" id="faq1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id tortor nisi. Morbi neque mauris, ornare sit amet varius id, malesuada a mauris. Nam libero neque, fringilla et dolor vitae, ornare gravida tellus. In eu felis lacus. Nunc placerat interdum diam, eget mollis orci luctus quis. Cras scelerisque accumsan purus, sed cursus urna faucibus eget. Aenean porttitor quam sed odio bibendum pretium. Nullam eget lobortis mauris, sit amet porttitor dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc rhoncus, urna eget mollis volutpat, purus ligula pretium turpis, in tincidunt purus nunc non neque. Integer mattis, urna non mattis porttitor, velit ligula tempus enim, bibendum bibendum sapien metus non enim. Aliquam tristique a purus eu blandit. Praesent eget dolor eget nulla malesuada efficitur vel at tortor. Integer eu egestas sapien, sed ornare quam. Cras libero ex, feugiat vitae lacinia vel, faucibus eget quam. </p>
</div>
<a href="#" class="FAQ" data-link="faq2"><h2>+Awards and Prizes</h2></a>
<div id="faq2" class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id tortor nisi. Morbi neque mauris, ornare sit amet varius id, malesuada a mauris. Nam libero neque, fringilla et dolor vitae, ornare gravida tellus. In eu felis lacus. Nunc placerat interdum diam, eget mollis orci luctus quis. Cras scelerisque accumsan purus, sed cursus urna faucibus eget. Aenean porttitor quam sed odio bibendum pretium. Nullam eget lobortis mauris, sit amet porttitor dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc rhoncus, urna eget mollis volutpat, purus ligula pretium turpis, in tincidunt purus nunc non neque. Integer mattis, urna non mattis porttitor, velit ligula tempus enim, bibendum bibendum sapien metus non enim. Aliquam tristique a purus eu blandit. Praesent eget dolor eget nulla malesuada efficitur vel at tortor. Integer eu egestas sapien, sed ornare quam. Cras libero ex, feugiat vitae lacinia vel, faucibus eget quam.</p>
</div>
<a href="#" class="FAQ" data-link="faq3"><h2>+Publications</h2></a>
<div class="info" id="faq3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id tortor nisi. Morbi neque mauris, ornare sit amet varius id, malesuada a mauris. Nam libero neque, fringilla et dolor vitae, ornare gravida tellus. In eu felis lacus. Nunc placerat interdum diam, eget mollis orci luctus quis. Cras scelerisque accumsan purus, sed cursus urna faucibus eget. Aenean porttitor quam sed odio bibendum pretium. Nullam eget lobortis mauris, sit amet porttitor dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc rhoncus, urna eget mollis volutpat, purus ligula pretium turpis, in tincidunt purus nunc non neque. Integer mattis, urna non mattis porttitor, velit ligula tempus enim, bibendum bibendum sapien metus non enim. Aliquam tristique a purus eu blandit. Praesent eget dolor eget nulla malesuada efficitur vel at tortor. Integer eu egestas sapien, sed ornare quam. Cras libero ex, feugiat vitae lacinia vel, faucibus eget quam. </p>
</div>
</div>
的JavaScript / Jquery的：
$(document).ready(function(){
$(".info").hide();
});
$(".FAQ").click(function(){
var test="#"+$(this).attr('data-link');
$(test).slideToggle("slow");
});
这是JSfiddle。
提前感谢您提供任何帮助。
答案 0 :(得分：0)
你应该使用一个值而不是“慢”，对我来说似乎可以修复它。
另外，我建议将return false放在函数的末尾，以防止视图再次出现在页面顶部。
答案 1 :(得分：0)
我无法看到所有元素之间的差异，动画似乎每个都有效。
在这种情况下，问题是margin的{{1}}和p margin-top的原生h2。这似乎与jQuery overflow函数赋予元素的slideToggle()属性有关。解决方法可能是从这些元素中移除边距并将margin-bottom提供给.info以保持相同的原始边距
p { margin: 0 }
h2 { margin-top: 0}
.info { margin-bottom: 19px }
这是JSFiddle。
答案 2 :(得分：0)
将此添加到您的CSS，修复了跳跃：
h2, p { margin-bottom: 0; }