时间戳

首页 > 解决方案 > 在 bootstrap .collapsed 选择器上使用 CSS 更改颜色

css - 在 bootstrap .collapsed 选择器上使用 CSS 更改颜色

问题描述

这是我的 Django 模板中的重要代码：

<a class="notibell" data-toggle="collapse" href="#pgsettings"><i class="fa fa-bell"></i></a>

<div class="collapse" id="pgsettings">
  # content to show using the toggle anchor tag above.
</div>

我在页面中使用这个 css <head>：

<style type="text/css">

.notibell.collapsed { 
    color: green !important;
    text-shadow: 2px 2px 2px #ccc;
}
.notibell { 
    color: red;
    text-shadow: 2px 2px 2px #ccc;
}

</style>

在页面加载时，图标颜色为红色（应为绿色）。然后单击时，颜色保持红色（扩展 div 的正确颜色）。然后再次单击，颜色变为绿色（折叠 div 的正确颜色）。然后从这一点开始，切换和颜色正确更改。

问题出在页面加载上，尽管有 !important 条件，但颜色渲染不正确。

我也尝试在引导加载之前和之后在头部加载 css，但这并没有什么不同。

在此先感谢，任何帮助表示赞赏。

标签： cssdjangotemplates

解决方案

您可以使用 jquery 切换功能将其启动为绿色并来回切换为红色。

https://www.w3schools.com/jquery/html_toggleclass.asp

推荐阅读