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

回答

相关问题