如何根据元素折叠状态更改颜色？答案

【问题标题】：How can I change color based on element collapse status?如何根据元素折叠状态更改颜色？
【发布时间】：2021-01-20 08:12:03
【问题描述】：

我想根据 div 是折叠还是展开来设置不同的颜色。

例如：如果某个部分被折叠，我想将按钮的背景颜色和标题颜色<h2> 设置为更柔和（具体为rgb(115, 129, 184);），并且当同一部分展开时我想要将它们设置为我的原色 (rgb(54, 74, 153);)。

这是我的 HTML 文件：

<section id="category">
  <div class="d-flex justify-content-between align-items-baseline">
    <h2>Category</h2>
      <button class="btn section-dropdown-btn float-right" type="button" 
        data-toggle="collapse" data-target="#categoryitems" aria-expanded="false">
        <i class="dropdown-expanded fa fa-angle-down"></i>
        <i class="dropdown-collapsed fa fa-angle-up"></i>
      </button>
  </div>
</section>

还有我的 CSS (based on this thread: https://stackoverflow.com/a/42291535)：

.section-dropdown-btn[aria-expanded=false] .dropdown-collapsed{
    display: none;
}

.section-dropdown-btn[aria-expanded=true] .dropdown-expanded{
    display: none;
}

.section-dropdown-btn[aria-expanded=false]{
    background-color: rgb(115, 129, 184);
}

.section-dropdown-btn[aria-expanded=true]{
    background-color: rgb(54, 74, 153);
}

但我不觉得这是一个很好且干净的解决方案。此外，只有按钮具有 aria-expanded 属性，所以我的 <h2> 标签无法轻易确定它是否折叠。我还必须制定许多类似的 CSS 规则，大约一个类只是为了更改一个属性。

我怎样才能做到这一点，我怎样才能避免重复？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 在执行操作时会将 collapse 和 show 类放在元素上。您应该能够使用您的 CSS 选择器来定位那些。这对你的父元素问题没有帮助，但它比使用 ARIA 属性更干净。

对于父选择器，您可以使用可用的events。写一个类似这样的函数，用一个类似的反函数来隐藏：

$('.item-wrapper').on('shown.bs.collapse', function () {
    $(this).closest('h2').addClass('blah');
});

然后，您将为该元素内的所有 CSS 使用您的自定义类。

【讨论】：