reactjs accordion 风格箭头不会下降的咏叹调-扩大真实

pepwfjgg  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(79)

我的html看起来像这样

<div class="accordian-wrapper">
<div class="accordion-wrapper__title">
<div aria-expanded=true">
<div class="accordion-wrapper__title__icon-label">
<i class="accordion-wrapper__arrow"/>
</div>
</div>
</div>
</div>

如果aria-expanded为true,我需要向下移动图标箭头
我所尝试的

.accordion-wrapper {
  .accordion-wrapper__title {
    &[aria-expanded="true"]{
      .accordion-wrapper__arrow {
        transform: rotate(90deg);
      }
    }
  }
}

但它不起作用我做错了什么

sqxo8psd

sqxo8psd1#

问题出在你的scss文件中。您在scss文件中没有选择aria展开的div。下面是更新后的代码:-

.accordion-wrapper {
  .accordion-wrapper__title {
    & > [aria-expanded="true"]{
      .accordion-wrapper__arrow {
        transform: rotate(90deg);
      }
    }
  }
}

aria-expanded divdiv的子类,class为.accordion-wrapper__title

希望对大家有帮助。

相关问题