Drehung von CSS Pfeil und JavaScript toggling

Question

Ich habe zwei Div-Banner, die entsprechende CSS-Pfeile haben. Wenn auf die Banner geklickt wird, wechselt das JavaScript zwischen dem Anzeigen und Verbergen des darunter liegenden Textes. Ebenso drehen sich die entsprechenden Pfeile nach unten, wenn der Text aufgedeckt wird, und sichern sich, wenn der Text verborgen ist.

Jetzt möchte ich meine erste div-Banner automatisch angezeigt werden, wenn die Seite zuerst lädt. Jedoch, wenn ich meine CSS-Pfeile zeichne, kann ich aufgrund des Auffüllens des div nicht erreichen, dass der Pfeil in der ersten div gleich dem Pfeil in den nachfolgenden div (s) ist und richtig aufgereiht wird.

http://jsfiddle.net/nVuQ2/1/

Ich habe versucht, mit der Platzierung des Pfeils Messing:

.tri0 { 
    margin-left: 20px; 
    margin-top: 5px; 
} 

aber das Beste, was ich tun kann, ist die tri0 drücken, um die Polsterung des h3 Tages Pfeil nach oben und es gewann geh nicht weiter.

Gibt es eine Möglichkeit, dass ich ein Toggle-Flag in der toggleClass setzen kann, um zu sagen, dass das erste Div-Banner bereits umgeschaltet ist und nachfolgende Klicks es deaktivieren?

Answer 1

Ihr Problem tritt wegen der border Ihrer tri s Elemente. Sie zeigen in jedem Ihrer Elemente unterschiedliche Rahmen an, wodurch sie auf verschiedene Arten angezeigt werden.

Also im Grunde habe ich sie mit den gleichen Grenzen Werte, die gleiche Drehung, und wenn Ihre Seite zuerst laden es schaltet Ihre div und zeigen Sie Ihre erste Nachricht.

Beachten Sie, dass es nicht notwendig ist, zwei verschiedene Klassen zu verwenden, um Ihren Elementstatus umzuschalten, sobald sie gleich sind.

Check in the Fiddle.

Nicht sicher, ob dies die Lösung ist, die Sie wollten. Aber ich hoffe das hilft dir.

Danke.

Answer 2

Probieren Sie die absolute Positionierung anstelle des Schwebens aus. So können Sie sicherstellen, dass die Pfeile immer in der Mitte ausgerichtet sind. Whoops, erkannte ich, ich nicht für den gedrehten Pfeil zu kompensieren hat:

.slide0, .slide1 { 
    position:relative; 
} 

.tri0, .tri1 { 
    position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto 0; 
} 
.tri0 { 
    right:5px; 
} 
.tri1 { 
    right:10px; 
} 

EDIT - Sie würden Eltern div zu position:relative, und Pfeile position:absolute;

Der Code wird wie folgt aussehen gesetzt. Da der 10px-Rahmen es effektiv 10px breit macht, positionieren Sie .tri1 mit rechts: 10px stattdessen. Aktualisierter Code oben und Update Geige hier.

Updated Fiddle