slidetoggle，选择链接后返回页面顶部

Question

点击链接

后，我有一个div滑下来

<a href="#" id="related-courses">Related Courses</a>

<div id="related-courses-section">
 <p>Content</p>
</div>

$('#related-courses').click(function() {
 $("#related-courses-section").slideToggle(100);
});

CSS设置为display：none;对于#levant-courses-section（默认隐藏）

它会显示div中的内容，但是点击链接后会将我带到页面顶部，为什么会这样做呢？

Answer 1

尝试将return false;添加到您的点击功能中，如下所示：

$('#related-courses').click(function() {
 $("#related-courses-section").slideToggle(100);
 return false;
});

这将阻止导航到链接网址的默认链接点击行为。

Answer 2

preventDefault（）是一种更灵活的方法 - 它在功能上与return false相同，但可以放在函数的开头，并且不会因某些其他原因而排除“返回”值。

$('#related-courses').click(function(e) {
  e.preventDefault();
  $("#related-courses-section").slideToggle(100);
});