当手风琴打开时，需要将.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);
}

看看小提琴 。