Bei einem zweiten Klick, Element wird an den Rand des Bildschirms bewegt

Question

Ich habe ein div, dass, nachdem ich ein Element (button1) klicken, erweitert seine Höhe. Ich habe dann eine andere Schaltfläche angezeigt, mit der Sie das div verkleinern können (button2). Nachdem ich auf button1 geklickt habe, wird das div erweitert und button2 wird unten angezeigt. Ich kann dann auf button2 klicken, um das div wieder zu normalisieren, aber wenn ich das div wieder expandiere, ist button2 jetzt von der Kante des Bildschirms entfernt, wenn auch an der gleichen unteren Stelle, ganz links statt zentriert.

Ich musste den Rand von Button2 auf -25px einstellen, da die absolute Positionierung ihn außermittig traf. Und ich muss die absolute Positionierung verwenden, da es schien, dass es nur eine Möglichkeit war, den Button am Ende von div erscheinen zu lassen, nachdem er sich erweitert hatte.

$(".button1").on("click", function(){ 
 

 
    $(".button1").fadeOut(200); \t 
 

 
    $("#block3").animate({ 
 
    height: '800px' 
 
    }, 600, function() { 
 

 
    $(".button2").fadeIn(200); 
 

 
    }); 
 

 
}); 
 

 

 

 
$(".button2").on("click", function(){ 
 

 
    $(".button2").fadeOut(200); \t \t 
 
    $("#block3").animate({ 
 
    height: '400px' 
 
    }, 600,function(){ 
 
    $(".button1").fadeIn(200); 
 

 
    }); 
 

 
});

.button2{ 
 
    width: 50px; 
 
    height: 50px; 
 
    display:none; 
 
    position: absolute; 
 
    margin-left: 25px; 
 
} 
 

 
.button1{ 
 

 
width: 50px; 
 
height: 50px; 
 
margin-top: 25px; 
 
image-rendering: auto; 
 

 
}

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

 
<div class="row"> 
 
    <div class = "col-md-12" id = "block3"> 
 
     <img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png" class = "button1" /> 
 
     <img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png" class = "button2" /> 
 
    </div> 
 
</div>

den Code hochgeladen.

https://jsfiddle.net/bs9xhe5e/2/

Answer 1

Am zweiten klicken Sie die Inline-Styling Anzeige geändert: Block statt display: inline, wenn Sie nur die Anzeige hinzu: inline in Ihre jQuery es funktioniert;

https://jsfiddle.net/havL1z3m/

Added

$(".button2").css({display:"inline"}); 

Answer 2

Der Grund .button2 ist den ganzen Weg nach links zeigt sich, dass die absolute Positionierung ein Standard left von 0px gibt.

Wahrscheinlich die einfachste Lösung wäre absolute Position, sowie die margin-left zu entfernen. Um stattdessen .button2 an den unteren Rand des Abschnitts zu setzen, setzen Sie einfach margin-top: 725px.

.button2{ 
    width: 50px; 
    height: 50px; 
    display:none; 
    margin-top: 725px; 
} 

Und dann werden Sie nicht mehr benötigen .css() verwenden bottom von .button2 zu ändern.

Schauen Sie sich diese Arbeits Geige: https://jsfiddle.net/gkpx7L15/

Answer 3

ändern button2 Arten wie folgt aus:

.button2{ 
    width: 50px; 
    height: 50px; 
    display:none; 
    position: absolute; 
    margin-left: -25px; 
    left:50%;//added style 
} 

https://jsfiddle.net/bs9xhe5e/3/ Und alles wird gut funktionieren HINWEIS: Element wird zum Zentrum von Eltern positioniert werden wie dies nur, wenn die Breite wie hier festgelegt ist. Beispiel:

.someItem{ 
    width: someWidth;//here we set some width to element 
    left: 50%; //Here we set position from the left 
    margin-left: -(somewidth/2);//here we set -half of the element's width for margin-left 
}