javascript - Java Script onClick 显示 div：意外行为。浏览器窗口垂直向上滚动

Question

我有以下 js，它显示了一个 div（地图）onClick。当 div 出现时，即使我在页面底部，浏览器窗口也会垂直向上滚动。如何防止这种行为？

HTML

<a href="#" class="toggle-next-div">Map</a>
<div class="slidingDiv">
<strong>content</strong>
<a href="#" class="toggle-next-div">hide</a>
</div>

JS

$(document).ready(function(){
$(".slidingDiv").hide();
$('.toggle-next-div').click(function(){
    $(this).next().slideToggle();
});
});

Answer 1

您可以使用.preventDefault()或return false：

$('.toggle-next-div').click(function(e){
    $(this).next().slideToggle();
    e.preventDefault();
});

// OR //

$('.toggle-next-div').click(function(){
    $(this).next().slideToggle();
    return false;
});

请注意，如果您有依赖于事件传播的函数，您可能需要使用第一个解决方案。return false;也停止事件传播。

Answer 2

a 是将您重定向到“#”的链接元素-> 它滚动到顶部:)。试试这个：

$('.toggle-next-div').click(function(event){
    event.preventDefault();
    $(this).next().slideToggle();
});