Question

我有一个带有可点击div的页面，可以在点击时切换内容。当第二次单击div（关闭内容）时，页面会跳回到顶部。

我发现这是其他人的问题，但我发现的所有解决方案都与锚标签有关，这不是问题所在。

我尝试根据解决方案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');

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

Answer 2

试试这个

<强> 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();
                });

                //What I added
                $(".more").click(function()
                {
                    var div = $(this);
                    $(window).scrollTop(div.offset().top).scrollLeft(div.offset().left);
                });
    });

基本上，您只需获取所点击的div的当前顶部和左侧位置，并在完成后将页面设置为在该点定位。

Fiddle Demo

BTW这是一个很酷的主意，干得好！

Answer 3

我所知道的唯一解决方案是：

  $(document).ready(function(){
        ....
        $('.more').toggle(
                function(){
                   ...
                },
                function(){
                  var tempTop = $(window).scrollTop(); //<----remember Y
                  var tempLeft = $(window).scrollleft(); //<----remember X
                  .... your code here ...
                  //----> now restore the position
                  $(window).scrollTop(tempTop);
                  $(window).scrollLeft(tempLeft);

                }
        );

切换回div跳回页面顶部

3 个答案: