Question

我想根据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规则，关于一个类只是为了更改一个属性。

我该如何实现？如何避免重复？

Answer 1

Bootstrap在其执行操作时将collapse和show类放在元素上。您应该能够使用CSS选择器来定位这些对象。这对您的父元素问题无济于事，但比使用ARIA属性更干净。

对于父选择器，您可以使用可用的events。编写类似这样的函数，并为隐藏提供类似的反函数：

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

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

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

1 个答案: