手风琴打开时需要将 .down-arrow 类添加到 div答案

【问题标题】：need to add the .down-arrow class to the div when the accordion opens up手风琴打开时需要将 .down-arrow 类添加到 div
【发布时间】：2017-04-27 00:03:58
【问题描述】：

我使用 css 创建了箭头图像。
但问题是当手风琴打开时我需要将 .down-arrow 类添加到 div。
现在我添加了一张图片，但不知道如何添加另一张图片。
你们能告诉我如何解决它吗
在下面提供我的代码

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

【问题讨论】：

标签： javascript html css reactjs redux

【解决方案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 类并且不可见。

【讨论】：

你能更新小提琴中的代码吗，太混乱了:(
jsfiddle.net/b4L6kyg4/30 不过记得在 CSS 中创建 invisible 类。
嘿，我创建了这个类，但它仍然不能正常工作......你能帮我吗jsfiddle.net/b4L6kyg4/32
jsfiddle.net/b4L6kyg4/36 - 你应该把细节放在.down-arrow 类中
@mirnalmech：嘿，你能告诉我原因吗...这对我很有帮助

【解决方案2】：

当打开手风琴时，手风琴部分会添加一个新的“选定”类。与其尝试更改类本身，不如使用这个新的“选定”类并更改现有箭头上的旋转属性。例如：

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

【讨论】：

所以你对这个类的发言-----> var className = 'accordion-section' + (this.props._selected ? ' selected' : '');
是的，没错。因此，当手风琴关闭时，该 div 上的类是“手风琴节”，当它打开时，它是“选择手风琴节”。箭头是该 div 的子元素，因此您可以使用该“选定”类来相应地更改其样式。因此，您不需要对标记进行任何其他更改，只需添加一些新的 CSS。你可以有，例如： .accordion-section .up-arrow {border-color:red} .accordion-section.selected up-arrow {border-color:pink}
我在一个 div 中添加了前三个部分，在另一个 div 中添加了另外三个部分....所以如果我单击第 3 部分，然后单击第 4 部分，第 3 部分不会关闭....哪里好像我单击第 3 部分，然后单击第 2 部分，它将关闭部分...你能告诉我如何修复它吗...我需要在 div 中维护三个部分，以便我可以包含每个部分集合的标题。 ..这里的例子jsfiddle.net/b4L6kyg4/41

【解决方案3】：

您可以在 Accordion 部分组件中添加相同的 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。

【讨论】：