jquery - 切换 div 跳回到页面顶部

Question

我有一个页面，其中包含可点击的 div，点击时会切换内容。第二次点击 div 时(关闭内容)，页面跳回顶部。

我看到这是其他人遇到的问题，但我找到的所有解决方案都与 anchor 标记有关，这不是这里的问题。

我已尝试根据解决方案 here 更改我的代码并添加 return false; 和 event.preventDefault(); 但这些都不起作用。我做错了什么？

jQuery:

    $(document).ready(function(){
        $('h1').animate({"right":"147px"},3000);
        $('.more').toggle(
                function(){
                    $(this).css({
                        'z-index':'100',
                        'background-position': '41px 0px'
                        });
                    $('#heroFullColor').hide();
                    $('#heroNoColor').show();
                    $('div.' + $(this).attr('id')).fadeIn('fast');
                    $('.more').not(this).hide();
                },
                function(){
                    $(this).css({
                        'background-position': '0px 0px'
                            });
                    $('div.' + $(this).attr('id')).fadeOut('fast');                 
                    $('#heroNoColor, .infoWindow').hide();
                    $('#heroFullColor').fadeIn('fast');                 
                    $('.more').not(this).show();
                });
    });

HTML 结构(在页面上重复多次):

    <div class="more" id="franceFlag"></div>
    <div class="infoWindow franceFlag">
        <img class="imageOn" src="images/lp_foundry_on-franceFlag.jpg" width="71" height="213" alt="French Flag" id="franceFlagOn" />
        <p class="franceFlag">blah blah blah</p>
    </div>      
    <div class="more" id="heliBoth"></div>
    <div class="infoWindow heliBoth">
        <img class="imageOn" src="images/lp_foundry_on-heliBoth.jpg" width="296" height="750" alt="Helicopters" id="heliBothOn" />
        <p class="heliBoth">blah blah blah</p>
    </div>      

Here is a fiddle - 如果你滚动到右下角，然后点击旗帜旁边的 + 号，你就会明白我的意思了。

Answer 1

这是因为您隐藏了提供容器高度的元素，然后显示了另一个元素。所以它暂时没有高度。

如果你明确地给你的容器一个高度，那将不会发生。例如。

#lp-foundry-container {
height: 940px;
}

第一次点击时不会发生同样的事情，因为隐藏和显示是即时进行的。如果你要改变

$('#heroNoColor').show();

到

$('#heroNoColor').fadeIn('fast');

就像关闭函数一样，第一次点击时也会发生同样的事情。