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

Question

• 我使用css創建了箭頭圖像。
• 但是問題是我需要在手風琴打開時向.div添加.down-arrow類。
• 現在我添加了一個圖像，但不確定如何添加另一個圖像。
• 你們能告訴我如何解決嗎
• 在下面提供我的代碼

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

Answer 1

創建一個invisible類，像這樣

.invisible{
display:none;
}

接着

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

然后將這些類應用於div

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

根據this.props._selected的值，在任何給定時間點，將附加一個invisible類，並且該類將不可見。

Answer 2

打開手風琴后，新的“選定”類將添加到手風琴部分。 無需嘗試更改類本身，只需使用此新的“選定”類並更改現有箭頭上的rotate屬性即可。 例如：

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

Answer 3

您可以在“手風琴”部分的組件中添加與this.props._selected相同的this.props._selected ：

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

並將render中的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);
}

看看小提琴 。