przełącz na div przeskakuje z powrotem na górę strony

Question

Mam stronę z klikalnymi elementami div, które przełączają treść po kliknięciu. Po kliknięciu elementu div po raz drugi (zamknięcie zawartości) strona przeskakuje z powrotem na górę.

Widzę, że jest to problem, który mieli inni ludzie, ale wszystkie znalezione przeze mnie rozwiązania są związane z tagiem kotwicy, co nie stanowi problemu.

Próbowałem zmienić kod na rozwiązanie here i dodając return false; i event.preventDefault();, ale żaden z nich nie zadziałał. Co ja robię źle?

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

struktura HTML (ten powtarza się kilka razy na stronie):

<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 - jeśli wskaż prawym dolnym rogu i kliknij + znak obok flagi, zobaczysz co mam na myśli.

Answer 1

To dlatego, że ukrywa się element, który dał swoją wysokość pojemnika, a następnie pokazano inną. Krótko więc nie ma wzrostu.

Jeśli wyraźnie podasz kontenerowi wysokość, to się nie stanie. na przykład.

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

To samo nie dzieje się przy pierwszym kliknięciu, ponieważ robisz ukrywanie i wyświetlasz natychmiast. Jeśli było zmienić

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

do

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

jak to jest na ścisłej funkcji, to samo stałoby się na pierwszego kliknięcia.

Answer 2

Spróbuj

---

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

Zasadniczo jesteś po prostu sobą aktualny górną i lewą pozycje clicked div i ustawienie strony pozycjonować się w tym momencie gdy pojawi są skończone.

Fiddle Demo

BTW jest to całkiem fajny pomysł, Dobra robota!

Answer 3

Jedynym rozwiązaniem wiem to:

$(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); 

       } 
     );