‚Toggle()‘ nicht richtig funktioniert, (schrumpft die div aus dem Bildschirm)

Question

Hier ist das Segment meines Code, der nicht funktioniert:

//code for div 3 
//When clicked the div will double in size and the text within will change and then when clicked again, all will revert back to original 
$('#div3').toggle(function(){ 
    $('#div3').animate({height: '300px', width: '300px'}); 
    document.getElementById('change-me').innerHTML="Click me to make me smaller!"; 
}, 
function(){ 
    $('#div3').animate({height: '150px', width: '150px'}); 
    document.getElementById('change-me').innerHTML="Click me to mke me bigger!"; 
}); 

Jedes Mal, wenn ich die Seite aktualisieren, um zu sehen, wenn es arbeiten, das div, dass dieser Code auch angewendet wird, schrumpft und verbläßt von der Seite in Richtung zur oberen rechten Ecke ...

Dank zu jedermann, das mir hilft. :)

Answer 1

Ya, Makeln ist nicht Funktion, um dies zu erreichen. Versuchen Sie dieses

function big() { 
 
    $('#div3').animate({ 
 
    height: '300px', 
 
    width: '300px' 
 
    }); 
 
    document.getElementById('change-me').innerHTML = "Click me to make me smaller!"; 
 
    $('#div3').off('click', big).on('click', small); 
 
} 
 

 
function small() { 
 
    $('#div3').animate({ 
 
    height: '150px', 
 
    width: '150px' 
 
    }); 
 
    document.getElementById('change-me').innerHTML = "Click me to mke me bigger!"; 
 
    $('#div3').off('click', small).on('click', big); 
 
} 
 

 
$('#div3').on('click', big);

div#div3 { 
 
    height: 150px; 
 
    width: 150px; 
 
    border: 1px solid green; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div id="div3"> 
 
    <div id="change-me"> 
 
    click me 
 
    </div> 
 
</div>

Answer 2

Das Hauptproblem mit dem ursprünglichen Code ist, dass seine die toggle Funktion, die in der Dokumentation nach

ist

Display oder ausblenden abgestimmte Elemente.

Es sieht aus wie das, was Sie wollen, ist die Größe der div3 auf Klick zu wechseln, wie diese

Version hinzugefügt: 1,0

let currSize = "small"; 
 
let config = { 
 
    small: { 
 
    size: { 
 
     height: '150px', 
 
     width: '150px' 
 
    }, 
 
    msg: "Click me to make me bigger!" 
 
    }, 
 
    big: { 
 
    size: { 
 
     height: '300px', 
 
     width: '300px' 
 
    }, 
 
    msg: "Click me to make me smaller!" 
 
    } 
 
}; 
 

 

 
$('#div3').click((e) => { 
 
    // toggle the current size 
 
    currSize = (currSize == "small") ? "big" : "small"; 
 
    
 
    // animate to the new size 
 
    $('#div3').animate(config[currSize].size); 
 
    
 
    // update the change-me text 
 
    document.getElementById('change-me').innerHTML = config[currSize].msg; 
 
});

#div3 { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: rgba(64,64,64,0.1); 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div3"> 
 
    Awesomest div ever, really, the best. 
 
    <div id="change-me">Click me to make me bigger!</div> 
 
</div>