當手風琴打開時，需要將.down-arrow類添加到div

我使用css創建了箭頭圖像。
但問題是我需要在手風琴打開時將.down-arrow類添加到div。
現在我添加了一個圖像，但不知道如何添加其他圖像。
你們能告訴我如何解決它
提供以下

.down-arrow { 
    -ms-transform: rotate(-55deg);

來源

2017-04-27 texi rv

我的代碼創建一個invisible類這樣

.invisible{ 
display:none; 
}

然後

var upArrowClassName = 'up-arrow' + (this.props._selected ? '' : ' invisible'); 
var downArrowClassName = 'down-arrow' + (this.props._selected ? ' invisible' : '');

然後a根據this.props._selected一個值將具有附着到它的invisible類時刻pply這些類的div

<div className={upArrowClassName}></div> 
<div className={downArrowClassName}></div>

在任何給定的點和將不可見。

來源

2017-04-27 00:39:41 mrinalmech

您可以更新小提琴代碼的如此混亂:( –

http://jsfiddle.net/b4L6kyg4/30/ 記住，雖然在創建CSS的'invisible'類。 – mrinalmech

嘿，我創建的類，但仍它不能正常工作......你能幫我嗎？http://jsfiddle.net/b4L6kyg4/32/ –

當手風琴打開時，一個新的「選定」類被添加到手風琴部分。不要嘗試改變類本身，只需使用這個新的「選定」類並更改現有箭頭的旋轉屬性即可。例如：

.selected .up-arrow { 
    transform: rotate(-45deg); 
}

來源

2017-04-27 01:32:31 partypete25

所以你講這個類-----> var className ='accordion-section' +（this.props._selected？ 'selected'：''）; –

是的，這是正確的。因此，當手風琴關閉時，該div上的課程是「手風琴節」，當它打開時是「選擇手風琴節」。箭頭是該div的子元素，因此您可以使用該「selected」類來相應地更改其樣式。因此，您不需要對標記進行任何其他更改，只需添加一些新的CSS即可。你可以有，例如： .accordion-section。向上箭頭{border-color：red} .accordion-section.selected向上箭頭{border-color：pink} – partypete25

我在一個div中添加了前三個部分，在另一個div中添加了另外三個部分....所以如果我點擊第3部分，然後點擊第4部分第3部分不關閉....如果我點擊部分第3部分，然後點擊第2部分它將關閉部分...你能告訴我如何解決它....我需要維護一個div中的三個部分，以便我可以包含每個部分集合的標題...示例http://jsfiddle.net/b4L6kyg4/41/ –

您可以在手風琴節組件添加相同this.props._selected爲：

var className1 = this.props._selected ? 'down-arrow' : 'up-arrow';

，並更改爲使className：

className={className1}

也使一些變化.down-arrow類別爲：

.down-arrow { 
    border-top: .15em solid #0b6997; 
    border-right: .15em solid #0b6997; 
    border-bottom: 0; 
    border-left: 0; 
    width: .5em; 
    height: .5em; 
    -ms-flex-item-align: center; 
    -ms-grid-row-align: center; 
    align-self: center; 
    transition: all .3s ease; 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
}

看看fiddle。

來源

2017-04-27 09:40:43

當手風琴打開時，需要將.down-arrow類添加到div

回答

相關問題