[英]need to add the .down-arrow class to the div when the accordion opens up
.down-arrow {
-ms-transform: rotate(-55deg);
Create an invisible
class like this 创建一个
invisible
类,像这样
.invisible{
display:none;
}
And then 接着
var upArrowClassName = 'up-arrow' + (this.props._selected ? '' : ' invisible');
var downArrowClassName = 'down-arrow' + (this.props._selected ? ' invisible' : '');
And then apply these classes to the divs 然后将这些类应用于div
<div className={upArrowClassName}></div>
<div className={downArrowClassName}></div>
At any given point in time according to the value of this.props._selected
one will have the invisible
class attached to it and won't be visible. 根据
this.props._selected
的值,在任何给定时间点,将附加一个invisible
类,并且该类将不可见。
When an accordion is opened, a new "selected" class is added to the accordion section. 打开手风琴后,新的“选定”类将添加到手风琴部分。 Rather than trying to change the class itself, just use this new 'selected' class and change the rotate property on your existing arrow.
无需尝试更改类本身,只需使用此新的“选定”类并更改现有箭头上的rotate属性即可。 eg:
例如:
.selected .up-arrow {
transform: rotate(-45deg);
}
You can add the same this.props._selected
in your Accordion section component as: 您可以在“手风琴”部分的组件中添加与
this.props._selected
相同的this.props._selected
:
var className1 = this.props._selected ? 'down-arrow' : 'up-arrow';
And change the className
in render as: 并将render中的
className
更改为:
className={className1}
Also make some changes in .down-arrow
class as: 还可以对
.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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.