CSSの回転とJavaScriptの切り替え

Question

対応するCSSの矢印を持つ2つのdivバナーがあります。バナーがクリックされると、javascriptは下のテキストを表示したり非表示にするかどうかを切り替えます。同様に、それぞれの矢印は、テキストが明らかにされたときには下に回転し、テキストが隠れているときには後退する。

ここでは、ページが最初に読み込まれるときに、最初のdivバナーを自動的に表示します。しかし、私がCSSの矢印を描いたとき、divのパディングのために、最初のdivの矢印を次のdivの矢印と同じにして、正しく整列させることはできません。

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

私は矢印の配置をいじって試してみた：

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

私ができる最善のはtri0を押すh3タグのパディングまで矢印であり、それは勝ちましたどんなに遠くに行くな。

toggleClassにトグルフラグを設定して、最初のdivバナーが既にトグルされており、その後のクリックでそのトグルを解除することができる方法はありますか？

Answer 1

あなたの問題は、あなたのtriの要素のborderの起こります。要素のそれぞれに異なる罫線を表示しています。これにより、異なる方法で表示されます。

基本的に同じ境界値、同じ回転でそれらを設定し、ページを最初に読み込んだときにdivをトグルして最初のメッセージを表示します。

要素の状態を切り替えるには、2つの異なるクラスを同じにする必要はありません。

Check in the Fiddle。

これが必要な解決策であるかどうかは不明です。しかし、私はあなたを助けることを願っています

ありがとうございました。

Answer 2

浮動小数点の代わりに絶対配置を使用すると、矢印が常に中央に配置されていることを確認できます。あなたは、コードは次のようになりますposition:absolute;

にposition:relativeに親のdivを設定し、矢印たい -

.slide0, .slide1 { 
    position:relative; 
} 

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

EDIT：おっと、私は私が回転矢印を補うためではないことに気付きました。 10pxの境界線では幅が10pxになるため、代わりに.tri1を右に配置します（10px）。上記のコードを更新し、ここでフィドルを更新してください。

Updated Fiddle