旋轉的CSS箭頭和JavaScript切換

我有兩個div橫幅有相應的CSS箭頭。當點擊橫幅時，JavaScript會在顯示和隱藏下面的文本之間切換。同樣，當文本被顯示時，各個箭頭向下旋轉，當文本被隱藏時，各個箭頭向下旋轉。旋轉的CSS箭頭和JavaScript切換

現在，我希望我的第一個div橫幅在頁面第一次加載時自動顯示。但是，當我繪製了我的CSS箭頭時，由於div的填充，我無法使第一個div中的箭頭與後續div中的箭頭相同並正確排列。

我試着用箭頭的位置搞亂：

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

，但我能做的最好是推tri0箭頭直至h3標籤的填充和它贏得再走得更遠。

有沒有一種方法可以在toggleClass中設置一個切換標誌，以表明第一個div橫幅已經被切換並且隨後的點擊使其不被切換？

來源

2013-12-24 noblerare

你的問題，是因爲你的tri小號元素的border的。您在每個元素中顯示不同的邊框，這會使它們以不同的方式出現。

所以基本上我設置它們具有相同的邊框值，相同的旋轉，並且當您的頁面第一次加載它時切換您的div並顯示您的第一條消息。

請注意，一旦它們相等，就不需要有兩個不同的類來切換您的元素狀態。

Check in the Fiddle。

不知道這是否是您想要的解決方案。但我希望這可以幫助你。

謝謝。

來源

2013-12-24 02:12:03

Oy。我不知道爲什麼我沒有想到首先這樣做。謝謝！ – noblerare

很高興幫助你:) –

這是工作最出色，但我不得不承認我不完全理解......爲什麼你不需要2班切換，一個切換在一個方向，一個在另一個？ – james

-1

嘗試使用絕對定位而不是浮動，這樣可以確保箭頭總是在中間對齊。你父格設置爲position:relative，和箭頭position:absolute;

的代碼看起來就像這樣 -

.slide0, .slide1 { 
    position:relative; 
} 

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

編輯：哎呦，我意識到我沒有補償旋轉的箭頭。由於10px邊框使其有效寬度爲10px，因此將右側的.tri1替換爲10px即可。更新上面的代碼，並在這裏更新小提琴。

Updated Fiddle

來源

2013-12-24 01:57:20

旋轉的CSS箭頭和JavaScript切換

回答

相關問題